commit 02843b95c986bd3f13189586266aa1855216db14 Author: ryanwong Date: Sat Nov 26 01:23:44 2022 -0500 first commit diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..f947ff9 --- /dev/null +++ b/.env.development @@ -0,0 +1,13 @@ +REACT_APP_BASE_URL="https://rptest.manaknightdigital.com/" +REACT_APP_API_URL="https://rptest.manaknightdigital.com/api/" +REACT_APP_SANCTUM_URL="https://rptest.manaknightdigital.com/sanctum/csrf-cookie" +REACT_VAPOR_URL="https://api-qa-mongoose-br2wu78v1.rocketplantech.com/vapor/signed-storage-url" +REACT_VAPOR_STORAGE_URL="https://storage-qa-mongoose-br2wu78v1.rocketplantech.com" +REACT_GOOGLE_API_KEY="AIzaSyBcqQuMIk9je3UKcjZCKS5sdKqEfIaNHAk" +REACT_GOOGLE_API=//maps.googleapis.com/maps/api/js?key=AIzaSyBcqQuMIk9je3UKcjZCKS5sdKqEfIaNHAk&libraries=places +REACT_INTERCOM_ID=t6huw9xl +REACT_TRANSLOADIT_TEMPLATE_ID=34b580b62cea4964aca081d52e36800a +REACT_TRANSLOADIT_AUTH_ID=b62a748ff0114d87910e454d4aff7f4b +REACT_TRANSLOADIT_LOGO_TEMPLATE_ID=33425f0eff0543778e7cdb2403fa42f6 +REACT_TRANSLOADIT_AVATAR_TEMPLATE_ID=5a639725d71e43489deeb3bdcf338aec +REACT_APP_PUSHER_APP_KEY=f17c0735529857c8b4e9 diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..0999d85 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules/** +.storybook/** +--ignore-pattern '!.storybook/**'" \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..8391ac9 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,81 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": ["plugin:react/recommended", "airbnb"], + "ignorePatterns": ["!**/*", "**/*.js"], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint", "import"], + "rules": { + "no-shadow": "off", + "no-useless-constructor": "off", + "no-use-before-define": [0], + "@typescript-eslint/no-use-before-define": [1], + "@typescript-eslint/no-unused-vars": "error", + "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }], + "max-len": "off", + "import/extensions": [ + "error", + "ignorePackages", + { + "js": "never", + "jsx": "never", + "ts": "never", + "tsx": "never" + } + ], + "react/jsx-uses-vars": "error", + "react/jsx-uses-react": "error", + "jsx-a11y/anchor-is-valid": 0, + "jsx-a11y/label-has-associated-control": "off", + "indent": "off", + "no-case-declarations": "off", + "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], + "no-restricted-globals": "off", + "implicit-arrow-linebreak": "off", + "import/no-webpack-loader-syntax": "off", + "linebreak-style": "off", + "import/no-unresolved": "off", + "import/prefer-default-export": "off", + "no-param-reassign": "off", + "no-return-await": "off", + "semi-style": "off", + "no-console": "error", + "react/no-unescaped-entities": "off", + "no-alert": "off", + "react/button-has-type": "off", + "brace-style": [2, "stroustrup", { "allowSingleLine": true }], + "prefer-destructuring": "off" + }, + "settings": { + "import/resolver": { + "alias": { + "map": [ + ["Assets", "./shared/assets"], + ["Components", "./src/shared/components"], + ["Containers", "./src/shared/containers"], + ["Context", "./src/shared/context"], + ["HOC", "./src/shared/hoc"], + ["Utils", "./src/shared/utils"], + ["Pages", "./src/pages"], + ["Hooks", "./src/shared/hooks"], + ["Themes", "./src/shared/themes"] + ], + "extensions": [".mjs", ".js", ".jsx", ".ts", ".tsx"] + //"extensions": [".mjs", ".jsx", ".ts", ".tsx"] + } + } + } +} diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml new file mode 100644 index 0000000..4a65dfb --- /dev/null +++ b/.github/workflows/deploy-production.yml @@ -0,0 +1,45 @@ +name: Deploy Release to AWS Production +on: + push: + tags: + - v* +jobs: + deploy: + name: Deploy to AWS + runs-on: ubuntu-latest + steps: + - name: Check out code + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14.x' + + - name: Build application + run: + yarn deploy-production + env: + CI: false + + - name: Configure AWS Credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + aws-region: us-east-2 + + - name: Upload dist folder to S3 + run: + aws s3 sync --delete dist s3://app.rocketplantech.com --acl public-read + + - name: Invalidate Cloudfront Distribution + run: + aws cloudfront create-invalidation --distribution-id=E16H1FFD3URB32 --paths /* + + - name: Upload artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: Logs + path: ./storage/logs diff --git a/.github/workflows/deploy-qa.yml b/.github/workflows/deploy-qa.yml new file mode 100644 index 0000000..513a1f7 --- /dev/null +++ b/.github/workflows/deploy-qa.yml @@ -0,0 +1,45 @@ +name: Deploy Dev Branch to AWS +on: + push: + branches: [ dev ] + #pull_request: + #branches: [ dev ] +jobs: + deploy: + name: Deploy to AWS + runs-on: ubuntu-latest + steps: + - name: Check out code + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14.x' + + - name: Build application + run: + CI=FALSE && yarn deploy-qa + + - name: Configure AWS Credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.QA_AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.QA_AWS_SECRET_ACCESS_KEY }} + aws-region: us-east-2 + + - name: Upload dist folder to S3 + run: | + aws s3 sync --delete dist s3://web-qa-mongoose-br2wu78v1.rocketplantech.com --acl public-read + aws s3 cp s3://web-qa-mongoose-br2wu78v1.rocketplantech.com/index.html s3://web-qa-mongoose-br2wu78v1.rocketplantech.com/index.html --cache-control "max-age=0, must-revalidate" --content-type "text/html" --metadata-directive REPLACE --acl public-read + + - name: Invalidate Cloudfront Distribution + run: + aws cloudfront create-invalidation --distribution-id=E1WZB3ALA7L1DR --paths /* + + - name: Upload artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: Logs + path: ./storage/logs diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml new file mode 100644 index 0000000..49e7d7f --- /dev/null +++ b/.github/workflows/deploy-staging.yml @@ -0,0 +1,46 @@ +name: Deploy Master Branch to AWS +on: + push: + branches: [ master ] + #pull_request: + #branches: [ dev ] +jobs: + deploy: + name: Deploy to AWS + runs-on: ubuntu-latest + steps: + - name: Check out code + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14.x' + + - name: Build application + run: + yarn deploy-staging + env: + CI: false + + - name: Configure AWS Credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.STAGING_AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.STAGING_AWS_SECRET_ACCESS_KEY }} + aws-region: us-east-2 + + - name: Upload dist folder to S3 + run: + aws s3 sync --delete dist s3://web-staging-mongoose-n5tr2spgf.rocketplantech.com --acl public-read + + - name: Invalidate Cloudfront Distribution + run: + aws cloudfront create-invalidation --distribution-id=E8LDW9E1E0R8T --paths /* + + - name: Upload artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: Logs + path: ./storage/logs diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e98af66 --- /dev/null +++ b/.gitignore @@ -0,0 +1,57 @@ +# Compiled source # +################### +*.com +*.class +*.dll +*.exe +*.o +*.so + +# Archives # +############ +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log + +# OS generated files # +###################### +.DS_Store +*.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db +.cache + +# Packages # +###################### +_resources/* +node_modules/* +bower_modules/* +bower_components/* +composer.lock +build/* +dist/* +_lessons/* +storybook-static/* +coverage/* + +# Custom # +###################### +webroot/api/vendor/* + +# local env # +###################### +.env.development.local +node_modules +.idea/ diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/common.sh b/.husky/common.sh new file mode 100644 index 0000000..e69de29 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..e6b136c --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npm run lint-staged && git add --all diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0e5ab65 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules/** +build +coverage \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..22f83ac --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "trailingComma": "es5", + "printWidth": 120, + "singleQuote": true, + "arrowParens": "always", + "proseWrap": "preserve" +} diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..dc5eef5 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,9 @@ +{ + "trailingComma": "es5", + "singleQuote": true, + "tabWidth": 4, + "printWidth": 80, + "semi": true, + "arrowParens": "always", + "proseWrap": "preserve" +} diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..8506796 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,29 @@ +/* eslint-disable */ +const path = require('path'); +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'], + core: { + builder: 'webpack5', + }, + webpackFinal: async (config) => { + config.resolve.alias['/'] = path.resolve(__dirname, '../src/shared'); + config.resolve.alias['Assets'] = path.resolve(__dirname, '../src/shared/assets'); + config.resolve.alias['Components'] = path.resolve(__dirname, '../src/shared/components'); + config.resolve.alias['Containers'] = path.resolve(__dirname, '../src/shared/containers'); + config.resolve.alias['Context'] = path.resolve(__dirname, '../src/shared/context'); + config.resolve.alias['HOC'] = path.resolve(__dirname, '../src/shared/hoc'); + config.resolve.alias['Utils'] = path.resolve(__dirname, '../src/shared/utils'); + config.resolve.alias['Hooks'] = path.resolve(__dirname, '../src/shared/hooks'); + config.resolve.alias['Themes'] = path.resolve(__dirname, '../src/shared/themes'); + config.resolve.alias['Routes'] = path.resolve(__dirname, '../src/routes'); + //This fixed Storybook crashing all the time + // config.cache = false; + return config; + }, + //This handles the error when importing svgs + babel: async (options) => { + options.plugins.push('babel-plugin-inline-react-svg'); + return options; + }, +}; diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 0000000..6c217c6 --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1 @@ +
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000..0a6ea27 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..85d0219 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,85 @@ +/*eslint-disable */ +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; +import React from 'react'; +import { Provider } from 'react-redux'; + +import { setupStore } from '../src/store'; + +//Use this to trigger responsive viewports +const customViewports = { + 'x-small': { + name: 'x-small', + styles: { + width: '575px', //<576px + height: '100vh', + }, + }, + small: { + name: 'small', + styles: { + width: '768px', //≥576px + height: '100vh', + }, + }, + medium: { + name: 'medium', + styles: { + width: '992px', //≥768px + height: '100vh', + }, + }, + large: { + name: 'large', + styles: { + width: '1199px', //≥992px + height: '100vh', + }, + }, + 'x-large': { + name: 'x-large', + styles: { + width: '1399px', //≥1200px + height: '100vh', + }, + }, + 'xx-large': { + name: 'xx-large', + styles: { + width: '100%', //≥1400px + height: '100vh', + }, + }, +}; + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + layout: 'centered', + viewport: { + viewports: { + ...MINIMAL_VIEWPORTS, + ...customViewports, + }, + }, +}; + +export const decorators = [ + (Story) => ( + +
+
+
+
+ +
+
+
+
+ + ), +]; diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..6b61141 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000..88859f2 Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..e3593bd --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["entepe85.gitlens"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..290f0ed --- /dev/null +++ b/README.md @@ -0,0 +1,79 @@ +# Web App + +Boilerplate Webpack 5, React and Bootstrap 5 project with global Css and Css modules enabled. + +# Hosts File Config +In order to run this application in local, you'll need to modify your hosts file configuration. Then you will be able to access/serve your application at https://test.rocketplantech.com:3000 + +### Windows +Please include the following line in your hosts file + +`127.0.0.1 test.rocketplantech.com` + +### Mac +Please do the following steps + +`sudo nano /private/etc/hosts` + +add `127.0.0.1 test.rocketplantech.com` to the end of the file and save + +run `sudo dscacheutil -flushcache` to flush the DNS cache + +you might need to run `chmod +x .husky/pre-commit` to have the linter activated on commits + +# App Setup + +This project is setup to use yarn. + +to get started. + +`run yarn prep` + +This will install husky and then download and install the nodule modules +Husky is used to run the linting. + +# Dev Build + +`yarn run start` + +# Staging Build + +`yarn run staging` + +# Production Build + +`yarn run production` + +# Task + +- To login go to https://test.rocketplantech.com:3000/ +- kevin@rocketplantech.com / Abcdef123 +- Create the form page https://test.rocketplantech.com:3000/form as in screenshot_1 +- Create delete modal and it can delete the form as well screenshot_2 +- When we click on add button, it will open modal popup showing form. need to integrate the ADD FORM api +- Need to integrate API to load the table + +## API for getting Contract Forms +``` +GET `/companies/${companyId}/contract-forms` +``` + +## API for Adding Contract Forms +``` +Request Body: { +company_id: companyId, +name: formName, +replacement_tags: typeof String, +status: 'active', +template: typeof string, +has_signature: true || false, +} +``` + +``` +POST `/contract-forms` +``` +## API for deleting Contract Forms +``` +DELETE `/contract-forms/${contractId}` +``` \ No newline at end of file diff --git a/config/.eslintrc.json b/config/.eslintrc.json new file mode 100644 index 0000000..09c1323 --- /dev/null +++ b/config/.eslintrc.json @@ -0,0 +1,50 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": ["plugin:react/recommended", "airbnb"], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint", "import"], + "rules": { + "no-shadow": "off", + "no-useless-constructor": "off", + "no-use-before-define": [0], + "@typescript-eslint/no-use-before-define": [1], + "no-unused-vars": 2, //Keep this as the files in this folder don't use TypeScript. + "@typescript-eslint/no-unused-vars": "error", + "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }], + "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], + "max-len": "off", + "import/extensions": [ + "error", + "ignorePackages", + { + "js": "never", + "jsx": "never", + "ts": "never", + "tsx": "never" + } + ], + "jsx-a11y/anchor-is-valid": 0, + "jsx-a11y/label-has-associated-control": "off", + "indent": "off", + "no-case-declarations": "off", + "no-restricted-globals": "off", + "implicit-arrow-linebreak": "off", + "import/no-webpack-loader-syntax": "off", + "linebreak-style": "off", + "import/no-unresolved": "off" + } +} diff --git a/config/envPath.js b/config/envPath.js new file mode 100644 index 0000000..7951e2b --- /dev/null +++ b/config/envPath.js @@ -0,0 +1,8 @@ +//Determine which env file to use, based on the environment +const root = require('./paths').root; +const envPaths = { + development: `${root}/.env.development`, + staging: `${root}/.env.staging`, + production: `${root}/.env`, +}; +module.exports = envPaths[process.env.NODE_ENV] || envPaths['production']; diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 0000000..f91b2e5 --- /dev/null +++ b/config/paths.js @@ -0,0 +1,17 @@ +const path = require('path'); + +module.exports = { + //Root of the application + root: path.normalize(path.resolve('./')), + + // Source files + src: path.normalize(path.resolve(__dirname, '../src')), + + assets: path.normalize(path.resolve(__dirname, '../src/shared/assets')), + + // Production build files + build: path.normalize(path.resolve(__dirname, '../dist')), + + // Static files that get copied to build folder + public: path.normalize(path.resolve(__dirname, '../public')), +}; diff --git a/config/webpack.base.js b/config/webpack.base.js new file mode 100644 index 0000000..45381e2 --- /dev/null +++ b/config/webpack.base.js @@ -0,0 +1,155 @@ +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ESLintPlugin = require('eslint-webpack-plugin'); +const Dotenv = require('dotenv-webpack'); +const path = require('path'); +const paths = require('./paths'); +const envPath = require('./envPath'); + +module.exports = { + // Where webpack looks to start building the bundle + entry: [path.normalize(`${paths.src}/index.tsx`)], + + // Where webpack outputs the assets and bundles + output: { + path: path.normalize(paths.build), + filename: '[name].bundle.js', + publicPath: '/', + }, + + // Customize the webpack build process + plugins: [ + // Removes/cleans build folders and unused assets when rebuilding + new CleanWebpackPlugin(), + + // Puts variables in .env files into process.env + new Dotenv({ + path: path.normalize(envPath), + }), + new CopyWebpackPlugin({ + patterns: [ + { + from: path.normalize(`${paths.src}/netlify-redirect`), + to: path.normalize(paths.build), + globOptions: { + ignore: ['*.DS_Store'], + }, + noErrorOnMissing: true, + }, + { + from: './node_modules/@pdftron/webviewer/public', + to: path.normalize(`${paths.build}/public/webviewer`), + globOptions: { + ignore: ['*.DS_Store'], + }, + }, + ], + }), + + // Generates an HTML file from a template + new HtmlWebpackPlugin({ + title: 'Company', + inject: 'body', + appMountId: 'app', + favicon: paths.src + '/images/favicon.png', + template: `${paths.src}/index.html`, // template file + filename: 'index.html', // output file + // ', //Lets us load the appropriate dev scripts in the html + axios: 'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js', + bootstrap: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js', + bootStrapCss: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css', + + react: 'https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js', + reactDom: 'https://cdn.jsdelivr.net/npm/react-dom@17.0.2/index.min.js', // Lets us load the appropriate dev scripts in the html + popper: 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/cjs/popper.min.js', + + redux: 'https://cdn.jsdelivr.net/npm/redux@4.1.0/lib/redux.min.js', + reactRedux: 'https://cdn.jsdelivr.net/npm/react-redux@7.2.4/lib/index.min.js', + reactRouterDom: 'https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/index.min.js', + }), + // ESLint configuration + new ESLintPlugin({ + files: ['.', 'src', 'config'], + formatter: 'table', + failOnError: false, + emitWarning: true, + }), + + // Prettier configuration + // new PrettierPlugin(), + ], + resolve: { + alias: { + RocketAssets: `${paths.src}/shared/assets`, + Components: path.normalize(`${paths.src}/shared/components`), + Containers: path.normalize(`${paths.src}/shared/containers`), + Context: path.normalize(`${paths.src}/shared/context`), + HOC: path.normalize(`${paths.src}/shared/hoc`), + Utils: path.normalize(`${paths.src}/shared/utils`), + Hooks: path.normalize(`${paths.src}/shared/hooks`), + Themes: path.normalize(`${paths.src}/shared/themes`), + Routes: path.normalize(`${paths.src}/routes`), + }, + symlinks: false, + cacheWithContext: false, + extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', '.mjs', '.css', '.scss', '.sass'], + }, + + // Determine how modules within the project are treated + module: { + rules: [ + // JavaScript: Use Babel to transpile JavaScript files + { + test: /\.(js|jsx|tsx|ts|mjs)$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel-loader', + }, + { + test: /\.(ts|tsx)$/, + use: [ + { + loader: 'ts-loader', + }, + ], + }, + { + test: /\.svg$/, + use: ['@svgr/webpack'], + }, + { + test: /\.(?:ico|png|jpg|gif|jpeg|ttf)$/, + type: 'assets/resource', + }, + + // Images: Copy image files to build folder + { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'assets' }, + + // Fonts and SVGs: Inline files + // { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'assets/inline' }, + ], + }, + // externals: { + // axios: { + // amd: 'axios', + // }, + // bootstrap: 'bootstrap', + // react: 'React', // Case matters here + // 'react-dom': 'ReactDOM', + // 'react-router-dom': 'react-router-dom', + // popperCore: { + // root: 'PopperJS', + // commonjs2: 'popper.js', + // commonjs: 'popper.js', + // amd: 'popper.js', + // }, + // 'react-router-dom': 'ReactRouter', + // redux: 'redux', + // 'react-redux': 'react-redux', + // }, + // externalsPresets: { web: false, webAsync: true }, + // optimization: { + // // fix node modules not packaged into zip + // concatenateModules: false, + // }, +}; diff --git a/config/webpack.dev.js b/config/webpack.dev.js new file mode 100644 index 0000000..2c23d29 --- /dev/null +++ b/config/webpack.dev.js @@ -0,0 +1,76 @@ +const webpack = require('webpack'); +const { merge } = require('webpack-merge'); +const common = require('./webpack.base.js'); +const paths = require('./paths'); +const path = require('path'); + +module.exports = merge(common, { + // Set the mode to development or production + mode: 'development', + + // Control how source maps are generated + devtool: 'inline-source-map', + output: { + path: path.normalize(paths.build), + publicPath: '/', + filename: 'js/[name].[contenthash].bundle.js', + }, + // Spin up a server for quick development + devServer: { + historyApiFallback: true, + contentBase: path.normalize(paths.build), + index: '/', + open: true, + compress: true, + hot: true, + port: 3000, + host: 'test.rocketplantech.com', + https: true, + noInfo: true, //This turns off information regarding the bundle. Set to false if you need to view the messages + }, + + module: { + rules: [ + // Styles: Inject CSS into the head with source maps + { + test: /\.(scss|css)$/i, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + sourceMap: true, + importLoaders: 1, + // modules: true, + modules: { + localIdentName: '[name]__[local]___[hash:base64:5]', + }, + }, + }, + { loader: 'postcss-loader', options: { sourceMap: true } }, + { loader: 'sass-loader', options: { sourceMap: true } }, + ], + include: /\.module\.css$/i, + }, + { + test: /\.(scss|css)$/i, + use: [ + 'style-loader', + // 'css-loader', + { + loader: 'css-loader', + options: { sourceMap: true, importLoaders: 1 }, + }, + { loader: 'postcss-loader', options: { sourceMap: true } }, + { loader: 'sass-loader', options: { sourceMap: true } }, + ], + exclude: /\.module\.css$/i, + }, + ], + }, + + plugins: [ + // Only update what has changed on hot reload + new webpack.HotModuleReplacementPlugin(), + ], +}); diff --git a/cypress/integration/1-getting-started/auth.spec.js b/cypress/integration/1-getting-started/auth.spec.js new file mode 100644 index 0000000..71c6cea --- /dev/null +++ b/cypress/integration/1-getting-started/auth.spec.js @@ -0,0 +1,67 @@ +/// + +// Welcome to Cypress! +// +// To learn more about how Cypress works and +// what makes it such an awesome testing tool, +// please read our getting started guide: +// https://on.cypress.io/introduction-to-cypress + +const newUserEmail = 'aj3@rocketplantech.com'; +const existingUserAccount = { email: 'aj@rocketplantech.com', password: 'signon123' }; +// Gotta keep updating the line below after every test run +const newUserAccount = { email: 'aj00@rocketplantech.com', password: 'signon123', phone: '236-833-6689' }; + +describe('rocketplan tech', () => { + beforeEach(() => { + // Cypress starts out with a blank slate for each test + // so we must tell it to visit our website with the `cy.visit()` command. + // Since we want to visit the same URL at the start of all our tests, + // we include it in our beforeEach function so that it runs before each test + cy.visit('https://test.rocketplantech.com:3000/'); + }); + + it('log in existing user', () => { + // We use the `cy.get()` command to get all elements that match the selector. + // Then, we use `should` to assert that there are two matched items, + // which are the two default items. + cy.wait(4000); + cy.get('input[name=email]') + .should('have.length', 1) + .type(existingUserAccount.email) + .should('have.value', existingUserAccount.email); + cy.wait(2000); + cy.get('input[name=password]') + .should('have.length', 1) + .type(existingUserAccount.password) + .should('have.value', existingUserAccount.password); + cy.get('button[type=submit]').click(); + cy.get('#Dashboard').should('have.length', 1); + }); + + // This reaches the phone verification screen + it('create new user', () => { + cy.wait(4000); + cy.get('input[name=email]') + .should('have.length', 1) + .type(newUserAccount.email) + .should('have.value', newUserAccount.email); + cy.wait(2000); + cy.get('#CreateCompany_Button').click(); + cy.get('input[name=password]') + .should('have.length', 1) + .type(newUserAccount.password) + .should('have.value', newUserAccount.password); + cy.get('input[name=confirm_password]') + .should('have.length', 1) + .type(newUserAccount.password) + .should('have.value', newUserAccount.password); + cy.get('#Signup_Next').click(); + cy.wait(1000); + cy.get('#Signup_PhoneNumber') + .should('have.length', 1) + .type(newUserAccount.phone) + .should('have.value', newUserAccount.phone); + cy.get('button[type=submit]').click(); + }); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..5a32e26 --- /dev/null +++ b/package.json @@ -0,0 +1,205 @@ +{ + "name": "company-tech", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "scripts": { + "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js", + "prep": "yarn && yarn prepare-husky && yarn start", + "lint": "eslint --ext 'mjs,js,jsx,ts,tsx' --fix", + "lint-staged": "lint-staged", + "prepare-husky": "husky install", + "storybook": "start-storybook -p 6006", + "test": "npx cypress open" + }, + "husky": { + "hooks": { + "pre-commit": "npm run lint-staged && git add --all" + } + }, + "lint-staged": { + "*.(js|ts|jsx|tsx)": [ + "eslint --fix", + "prettier --write" + ] + }, + "dependencies": { + "@pdftron/webviewer": "^8.1.0", + "@popperjs/core": "^2.9.2", + "@sentry/react": "^6.13.3", + "@sentry/tracing": "^6.13.3", + "@shopify/react-web-worker": "^2.1.6", + "@types/googlemaps": "^3.43.3", + "@uppy/core": "^2.1.6", + "@uppy/robodog": "^2.5.0", + "@uppy/transloadit": "^2.1.2", + "axios": "^0.21.1", + "bootstrap": "^5.0.2", + "buffer": "^6.0.3", + "date-fns": "^2.22.1", + "deep-equal": "^2.0.5", + "email-validator": "^2.0.4", + "google-map-react": "^2.1.10", + "history": "^5.0.0", + "laravel-echo": "^1.11.2", + "lodash": "^4.17.21", + "password-validator": "^5.1.1", + "pusher-js": "^7.0.3", + "qs": "^6.10.1", + "query-string": "^7.0.1", + "react": "^17.0.2", + "react-anchorme": "^2.2.1", + "react-copy-to-clipboard": "^5.0.3", + "react-datepicker": "^4.4.0", + "react-dom": "^17.0.2", + "react-dropzone": "^11.3.4", + "react-geocode": "^0.2.3", + "react-google-autocomplete": "^2.4.0", + "react-input-mask": "^2.0.4", + "react-paginate": "^7.1.3", + "react-phone-number-input": "^3.1.35", + "react-redux": "^7.2.4", + "react-router-dom": "^5.2.0", + "react-textarea-autosize": "^8.3.3", + "react-use-intercom": "^1.4.0", + "redux": "^4.1.0", + "redux-thunk": "^2.3.0", + "screen-size-detector": "^1.0.4", + "uuid": "^8.3.2" + }, + "devDependencies": { + "@babel/cli": "^7.14.5", + "@babel/core": "^7.14.6", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/preset-env": "^7.14.7", + "@babel/preset-react": "^7.14.5", + "@babel/preset-typescript": "^7.14.5", + "@storybook/addon-actions": "^6.3.4", + "@storybook/addon-essentials": "^6.3.4", + "@storybook/addon-links": "^6.3.4", + "@storybook/addon-viewport": "^6.3.4", + "@storybook/builder-webpack5": "^6.3.4", + "@storybook/manager-webpack5": "^6.3.4", + "@storybook/react": "^6.3.4", + "@svgr/webpack": "^5.5.0", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^12.0.0", + "@types/bootstrap": "^5.0.17", + "@types/jest": "^26.0.24", + "@types/react": "^17.0.14", + "@types/react-dom": "^17.0.9", + "@types/react-redux": "^7.1.18", + "@types/react-router-dom": "^5.1.8", + "@typescript-eslint/eslint-plugin": "^4.28.3", + "@typescript-eslint/parser": "^4.28.3", + "autoprefixer": "^10.3.1", + "babel-jest": "^27.0.6", + "babel-loader": "^8.2.2", + "babel-plugin-inline-react-svg": "^2.0.1", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "clean-webpack-plugin": "^3.0.0", + "copy-webpack-plugin": "^9.1.0", + "core-js": "^3.15.2", + "cross-env": "^7.0.3", + "css-loader": "^6.1.0", + "css-minimizer-webpack-plugin": "^3.0.2", + "cypress": "^8.7.0", + "dotenv-webpack": "^7.0.3", + "eslint": "^7.31.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-config-prettier": "^8.3.0", + "eslint-import-resolver-alias": "^1.1.2", + "eslint-import-resolver-webpack": "^0.13.2", + "eslint-plugin-import": "^2.23.4", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "^7.24.0", + "eslint-plugin-react-hooks": "^4.2.0", + "eslint-webpack-plugin": "^2.5.4", + "html-loader": "^2.1.2", + "html-webpack-plugin": "^5.3.1", + "husky": "^7.0.1", + "jest": "^27.0.6", + "jest-cli": "^27.0.6", + "lint-staged": "^11.0.1", + "mini-css-extract-plugin": "^2.1.0", + "node-sass": "^6.0.1", + "postcss": "^8.3.5", + "postcss-loader": "^6.1.1", + "postcss-preset-env": "^6.7.0", + "prettier": "^2.3.2", + "rimraf": "^3.0.2", + "sass-loader": "^12.1.0", + "style-loader": "^3.1.0", + "terser-webpack-plugin": "^5.1.4", + "ts-jest": "^27.0.3", + "ts-loader": "^9.2.3", + "typescript": "^4.3.5", + "webpack": "^5.45.1", + "webpack-cli": "^4.7.2", + "webpack-dev-server": "^3.11.2", + "webpack-merge": "^5.8.0", + "worker-loader": "^3.0.8" + }, + "babel": { + "presets": [ + [ + "@babel/preset-env", + { + "debug": true, + "useBuiltIns": "usage", + "corejs": "3.6.5" + } + ], + [ + "@babel/preset-react" + ] + ], + "plugins": [ + "syntax-dynamic-import", + "transform-class-properties", + "@babel/plugin-transform-modules-commonjs" + ] + }, + "jest": { + "coverageDirectory": "dist/test-results", + "setupFilesAfterEnv": [ + "/stories/setupTests.js" + ], + "transform": { + "\\.(js|ts|tsx)": "ts-jest", + "\\.(js|jsx)": "babel-jest", + ".svg": "/__mocks__/mockModule.js" + }, + "testPathIgnorePatterns": [ + "/node_modules/", + "/lib/" + ], + "testRegex": "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$", + "moduleFileExtensions": [ + "ts", + "tsx", + "js", + "json" + ], + "moduleNameMapper": { + "RocketAssets/(.*)": "/src/shared/assets/$1", + "Components/(.*)": "/src/shared/components/$1", + "Containers/(.*)": "/src/shared/containers/$1", + "HOC/(.*)": "/src/shared/hoc/$1", + "Hooks/(.*)": "/src/shared/hooks/$1", + "Utils/(.*)": "/src/shared/utils/$1", + "Context/(.*)": "/src/shared/context/$1", + "Routes/(.*)": "/src/routes/$1" + }, + "coverageThreshold": { + "global": { + "branches": 4, + "functions": 4, + "lines": 4, + "statements": 4 + } + } + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..8e5c6b2 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,20 @@ +const postCssPresetEnv = require('postcss-preset-env'); +const autoprefixer = require('autoprefixer'); + +module.exports = { + plugins: [ + postCssPresetEnv({ + browsers: 'last 1 versions', + }), + autoprefixer, + ], +}; + +// module.exports = { +// plugins: [ +// require('postcss-preset-env')({ +// browsers: 'last 1 versions', +// }), +// require('autoprefixer'), +// ], +// }; diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 0000000..f824337 --- /dev/null +++ b/public/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/screenshot_1.png b/screenshot_1.png new file mode 100644 index 0000000..6197534 Binary files /dev/null and b/screenshot_1.png differ diff --git a/screenshot_2.png b/screenshot_2.png new file mode 100644 index 0000000..0fbad85 Binary files /dev/null and b/screenshot_2.png differ diff --git a/screenshot_3.png b/screenshot_3.png new file mode 100644 index 0000000..155daf8 Binary files /dev/null and b/screenshot_3.png differ diff --git a/src/app/App.css b/src/app/App.css new file mode 100644 index 0000000..64d6c48 --- /dev/null +++ b/src/app/App.css @@ -0,0 +1,28 @@ +/* css reset to remove the scrollbar,until it's needed */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +html { + height: 100%; +} + +body { + margin: 0; + min-height: 100vh; + background-color: #000; + font-family: sans-serif; + border: unset; +} + +.textAlignCenter { + text-align: center; +} + +.modal-backdrop { + z-index: 1000000000; +} +.modal { + z-index: 1000000001; +} diff --git a/src/app/App.tsx b/src/app/App.tsx new file mode 100644 index 0000000..a35d52a --- /dev/null +++ b/src/app/App.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import { Provider } from 'react-redux'; +import { Routes } from 'Routes/Routes'; + +import { UserProvider } from 'Context/User'; +import { CoreProvider } from 'Context/Core'; + +// Pull the mock data +import { setupStore } from '../store'; +import './App.css'; + +// Create the store +const store = setupStore(); + +const App = () => ( + + + + + + + +); +export default App; diff --git a/src/app/index.ts b/src/app/index.ts new file mode 100644 index 0000000..f1f2a24 --- /dev/null +++ b/src/app/index.ts @@ -0,0 +1,3 @@ +import App from './App'; + +export default App; diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 0000000..d6cd5e3 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f959db2 --- /dev/null +++ b/src/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + +
+ + + + diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..73315f6 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,45 @@ +/*eslint-disable */ +// //the linter generates an error about App.default. Imported JSX component default must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case +// //However this is what React needs to render the app. +import React from 'react'; +import { render } from 'react-dom'; +//import { Api } from 'Utils/api'; +//import * as Sentry from '@sentry/react'; +//import { Integrations } from '@sentry/tracing'; + +// Sentry integration on production, staging, and qa +// if (window.location.hostname !== 'test.rocketplantech.com') { +// Sentry.init({ +// dsn: 'https://cc9581db4cc94680a8ede2385b796888@o537211.ingest.sentry.io/5662701', +// integrations: [new Integrations.BrowserTracing()], +// environment: process.env.NODE_ENV === 'production' ? 'production' : 'qa', +// // We recommend adjusting this value in production, or using tracesSampler +// // for finer control +// tracesSampleRate: 1.0, +// }); +// } +// Need to get the google api loaded +//const script = document.createElement(`script`); +//script.src = process.env.REACT_GOOGLE_API; +//document.body.appendChild(script); +//Add an event listener for the script tag. This will ensure that the Google api is loaded before the app +//Make the callback async so we can use the await keyword, when importing the App component +//script.addEventListener(`load`, async () => { + //We need to dynamically import the App component, after the google maps api has been loaded. + //This prevents the error Uncaught ReferenceError: google is not defined. + //Ie, in the maps.ts file, this error will occur if the api has not be instantiated + //before the App component is rendered. + //Api.csrfHeader().then(async (exists: boolean) => { + //if (exists) { + //Dynamically import the App component +(async() => { + const App = await import('./app'); + render(, document.getElementById('app')); + return; +} +)(); + //} + //Todo we need to create an error page with contact info for support + // alert('Please contact support. The application cannot load.'); + //}); +//}); diff --git a/src/routes/PrivateRoutes.tsx b/src/routes/PrivateRoutes.tsx new file mode 100644 index 0000000..030aafb --- /dev/null +++ b/src/routes/PrivateRoutes.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; +import { Redirect, Route } from 'react-router-dom'; +import { useSelector } from 'react-redux'; + +import { areEqual } from 'Utils/equalityChecks'; +import { userVerificationsSelector } from 'Containers/User/selector'; + +const PrivateRoute = ({ exact, path, render }: any) => { + const userVerifications = useSelector(userVerificationsSelector, areEqual); + const { authenticated, sms, company, approved } = userVerifications; + + // we'll redirect if the user: + // is not authenticated, + // doesn't has a company, + // or company is not approved, + if (!authenticated && !sms && !company && !approved) { + return ( + ( + + )} + /> + ); + } + + return ; +}; + +const PrivateRouteMemo = memo(PrivateRoute, areEqual); + +export { PrivateRouteMemo as PrivateRoute }; diff --git a/src/routes/PublicRoutes.tsx b/src/routes/PublicRoutes.tsx new file mode 100644 index 0000000..8f7dbcd --- /dev/null +++ b/src/routes/PublicRoutes.tsx @@ -0,0 +1,112 @@ +import React, { memo } from 'react'; +import { Redirect, Route } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import { areEqual } from 'Utils/equalityChecks'; +import { userVerificationsSelector } from 'Containers/User/selector'; +import { getAppRedirectPathLocal } from 'Containers/Core/actions'; + +// list of URLs of signup flow, unverified users should be able to access these routes +const excludes = ['/phoneverificationcode', '/welcomeaboard', '/welcomeback']; + +const PublicRoute = ({ exact, path, render }: any) => { + const userVerifications = useSelector(userVerificationsSelector, areEqual); + const appRedirectPath = getAppRedirectPathLocal(); + + // if the user is authenticated we'll do the following + if (userVerifications?.authenticated) { + const { sms, company, approved, isNew } = userVerifications; + // verified users with an approved company attached are redirected to the dashboard screen + if (sms && company && approved) { + return ( + ( + + )} + /> + ); + } + + // verified users that don't have a company attached are redirected to the signupuserinformation screen + if (sms && !company) { + if (path === '/signupuserinformation') { + return ; + } + + return ( + ( + + )} + /> + ); + } + + // verified users that are attached to a company, but aren't approved yet are redirected to the blocked screen + if (sms && company && !approved) { + if (path === '/welcomeback') { + return ; + } + + return ( + ( + + )} + /> + ); + } + + // unverified users will always be redirected to the phone verification page + if (!sms && !excludes.includes(path)) { + // if the path is `phoneverification` we'll return the route otherwise trigger a redirect + // this is to prevent infinite redirection on this path + if (path === '/phoneverification') { + return ; + } + + return ( + ( + + )} + /> + ); + } + } + + // public default route + return ; +}; + +const PublicRouteMemo = memo(PublicRoute, areEqual); + +export { PublicRouteMemo as PublicRoute }; diff --git a/src/routes/RedirectRoute.tsx b/src/routes/RedirectRoute.tsx new file mode 100644 index 0000000..afbc0d3 --- /dev/null +++ b/src/routes/RedirectRoute.tsx @@ -0,0 +1,19 @@ +/* eslint-disable */ +import { Redirect, Route } from 'react-router-dom'; +import React from 'react'; + +export const RedirectRoute = ({ children, redirect = '/login', ...rest }) => { + return ( + ( + + )} + /> + ); +}; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx new file mode 100644 index 0000000..2d58e00 --- /dev/null +++ b/src/routes/Routes.tsx @@ -0,0 +1,391 @@ +import React from 'react'; + +import { BrowserRouter, Route, Switch } from 'react-router-dom'; + +import queryString from 'query-string'; + +// layout wrappers and dashboard container +import { Dashboard, DashboardWrapper } from 'Containers/Dashboard'; +import { GuestWrapper } from 'Containers/Auth'; +import { PhotoViewWrapper } from 'Containers/PhotoView/PhotoViewWrapper'; +import { SplashPageWrapper } from 'Containers/SplashPageWrapper'; + +import { PhotoShare, PhotoShareGallery, PhotoShareWrapper } from 'Containers/Public'; + +import { NotFoundWrapper } from 'Containers/NotFoundWrapper'; +// guest components +import { + SignInHow, + SignInEmail, + SignUpEmail, + ForgotPassword, + ForgotPasswordEmailSent, + ResetPassword, + PhoneVerification, + PhoneVerificationCode, + SignUpUserInformation, + WelcomeAboard, + NoCompany, + SelectAccountType, + Blocked, +} from 'Containers/SignIn'; + +import { PhotoView } from 'Containers/PhotoView'; +import { PhotoView as NewPhotoView, RocketScan, MultiUnit, MultiUnitRooms } from 'Containers/RocketScan'; +import { PhotoShareSplashView } from 'Containers/Public/PhotoShare/PhotoShareSplashView'; + +// dashboard components +import { CreateProjectMain, Projects } from 'Containers/Projects'; +import { People } from 'Containers/People'; +import { Crew } from 'Containers/Crew'; +import { Project } from 'Containers/Project'; +import { Account, About } from 'Containers/User'; +import { ProjectData } from 'Containers/ProjectData'; +import { RocketDry } from 'Containers/RocketDry'; + +// route components +import { PhotoShareProvider } from 'Context/PhotoShare/PhotoShareProvider'; + +import { ProjectsProvider } from 'Context/Projects'; +import { SingleProjectProvider } from 'Context/Project'; +import { Notes } from 'Containers/Notes'; +import { NotesProvider } from 'Context/Notes'; +import { PhotoReport, DryingReport, ReportsAndDocuments } from 'Containers/ReportsAndDocuments'; +import { PrivateRoute } from './PrivateRoutes'; +import { PublicRoute } from './PublicRoutes'; + +// Render Props. Create here to prevent a rerender, on a route change, due to arrow functions always being considered new +const signInHowRoute = () => ( + + + +); +const SignInRoute = () => ( + + + +); +const SignUpRoute = () => ( + + + +); +const ForgotPasswordRoute = () => ( + + + +); +const ForgotPasswordEmailSentRoute = () => ( + + + +); +const PhoneVerificationRoute = () => ( + + + +); +const PhoneVerificationCodeRoute = () => ( + + + +); +const SignUpUserInformationRoute = () => ( + + + +); + +const WelcomeAboardRoute = () => ( + + + +); + +const WelcomeBackRoute = () => ( + + + +); + +const NoCompanyRoute = () => ( + + + +); + +const SelectAccountTypeRoute = () => ( + + + +); +// This route is for a user that clicks on an email reset link. +const ResetPasswordRoute = ({ location: { search } }: any) => { + // destructure search from location in props. + const { token, email } = queryString.parse(search.replace('+', '%2B')); + return ( + + + + ); +}; + +// dashboard routes - home screen +const DashboardRoute = ({ location: { search } }: any) => { + // destructure search from location in props. + const { ft } = queryString.parse(search); + return ( + + + + ); +}; + +// Projects related routes +const ProjectsRoute = () => ( + + + + + +); + +/* + * single project routes: tabs specific + * */ +const ProjectRoute = () => ( + + + +); +const ProjectPhotoManagementRoute = () => ( + + + +); + +const CreateProjectRoute = () => ( + + + +); +const EditAddressRoute = () => ( + + + +); + +// people related routes +const PeopleRoute = () => ( + + + +); + +const PhotoViewRoute = () => ( + + + +); + +const SignUpFromInviteRoute = () => ( + + + +); +const PhotoShareSplashRoute = () => ( + + + +); + +const PhotoShareRoute = () => ( + + + +); + +const PhotoShareGalleryRoute = () => ( + + + + + +); + +const RocketScanRoute = () => ( + + + +); + +const RocketScanMultiUnitRoute = () => ( + + + +); + +const RocketScanCommercialRoute = () => ( + + + +); + +const AccountRoute = () => ( + + + +); + +const AboutRoute = () => ( + + + +); + +const RocketScanMultiUnitContentViewRoute = () => ( + + + +); + +const RocketScanCommercialRoomsViewRoute = () => ( + + + +); + +const AllNotesRoute = () => ( + + + + + +); + +const CrewRoute = () => ( + + + +); + +const RocketScanPhotoViewRoute = () => ( + + + + + +); + +const ProjectDataRoute = () => ( + + + +); + +const RocketReportsRoute = () => ( + + + +); + +const GeneratePhotoReportRoute = () => ( + + + +); + +const GenerateDryingReportRoute = () => ( + + + +); + +const RocketDryRoute = () => ( + + + +); + +const NotFoundRoute = () => ; + +export const Routes = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/routes/index.ts b/src/routes/index.ts new file mode 100644 index 0000000..393979c --- /dev/null +++ b/src/routes/index.ts @@ -0,0 +1,4 @@ +export { Routes } from './Routes'; +export { PrivateRoute } from './PrivateRoutes'; +export { PublicRoute } from './PublicRoutes'; +export { RedirectRoute } from './RedirectRoute'; diff --git a/src/shared/Assets/actions-default.svg b/src/shared/Assets/actions-default.svg new file mode 100644 index 0000000..c09328a --- /dev/null +++ b/src/shared/Assets/actions-default.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/shared/Assets/actions-purple.svg b/src/shared/Assets/actions-purple.svg new file mode 100644 index 0000000..f9db43c --- /dev/null +++ b/src/shared/Assets/actions-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/add-button-lg.svg b/src/shared/Assets/add-button-lg.svg new file mode 100644 index 0000000..2a64b54 --- /dev/null +++ b/src/shared/Assets/add-button-lg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/add-button-sm.svg b/src/shared/Assets/add-button-sm.svg new file mode 100644 index 0000000..3046488 --- /dev/null +++ b/src/shared/Assets/add-button-sm.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/addressBuilding.svg b/src/shared/Assets/addressBuilding.svg new file mode 100644 index 0000000..815fa30 --- /dev/null +++ b/src/shared/Assets/addressBuilding.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/air-mover.svg b/src/shared/Assets/air-mover.svg new file mode 100644 index 0000000..e871319 --- /dev/null +++ b/src/shared/Assets/air-mover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/air-scrubber.svg b/src/shared/Assets/air-scrubber.svg new file mode 100644 index 0000000..daf47c2 --- /dev/null +++ b/src/shared/Assets/air-scrubber.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/apple.svg b/src/shared/Assets/apple.svg new file mode 100644 index 0000000..228eca8 --- /dev/null +++ b/src/shared/Assets/apple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/appliances-sm.svg b/src/shared/Assets/appliances-sm.svg new file mode 100644 index 0000000..18e20eb --- /dev/null +++ b/src/shared/Assets/appliances-sm.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/appliances.svg b/src/shared/Assets/appliances.svg new file mode 100644 index 0000000..92ef54b --- /dev/null +++ b/src/shared/Assets/appliances.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/arrow-left.svg b/src/shared/Assets/arrow-left.svg new file mode 100644 index 0000000..551a35c --- /dev/null +++ b/src/shared/Assets/arrow-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/asbestos.svg b/src/shared/Assets/asbestos.svg new file mode 100644 index 0000000..64ec54a --- /dev/null +++ b/src/shared/Assets/asbestos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/australiaflag.svg b/src/shared/Assets/australiaflag.svg new file mode 100644 index 0000000..83f3ae8 --- /dev/null +++ b/src/shared/Assets/australiaflag.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/basement.svg b/src/shared/Assets/basement.svg new file mode 100644 index 0000000..5b26c5b --- /dev/null +++ b/src/shared/Assets/basement.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/bathroom.svg b/src/shared/Assets/bathroom.svg new file mode 100644 index 0000000..2418bfb --- /dev/null +++ b/src/shared/Assets/bathroom.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/shared/Assets/bedroom.svg b/src/shared/Assets/bedroom.svg new file mode 100644 index 0000000..a05c92b --- /dev/null +++ b/src/shared/Assets/bedroom.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/shared/Assets/bookmark-outline-purple.svg b/src/shared/Assets/bookmark-outline-purple.svg new file mode 100644 index 0000000..79cde89 --- /dev/null +++ b/src/shared/Assets/bookmark-outline-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/bookmark-photo.svg b/src/shared/Assets/bookmark-photo.svg new file mode 100644 index 0000000..899b2f4 --- /dev/null +++ b/src/shared/Assets/bookmark-photo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/bookmark-purple.svg b/src/shared/Assets/bookmark-purple.svg new file mode 100644 index 0000000..d6ba107 --- /dev/null +++ b/src/shared/Assets/bookmark-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/bookmark.svg b/src/shared/Assets/bookmark.svg new file mode 100644 index 0000000..1dbbda3 --- /dev/null +++ b/src/shared/Assets/bookmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/bookmarked-photo.svg b/src/shared/Assets/bookmarked-photo.svg new file mode 100644 index 0000000..d7c61fd --- /dev/null +++ b/src/shared/Assets/bookmarked-photo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/canadaflag.svg b/src/shared/Assets/canadaflag.svg new file mode 100644 index 0000000..7c432b7 --- /dev/null +++ b/src/shared/Assets/canadaflag.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/caret-down.svg b/src/shared/Assets/caret-down.svg new file mode 100644 index 0000000..ccf11d2 --- /dev/null +++ b/src/shared/Assets/caret-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/caret-up.svg b/src/shared/Assets/caret-up.svg new file mode 100644 index 0000000..c714c98 --- /dev/null +++ b/src/shared/Assets/caret-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/carousel-next.svg b/src/shared/Assets/carousel-next.svg new file mode 100644 index 0000000..55968d6 --- /dev/null +++ b/src/shared/Assets/carousel-next.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/carousel-prev.svg b/src/shared/Assets/carousel-prev.svg new file mode 100644 index 0000000..652acd1 --- /dev/null +++ b/src/shared/Assets/carousel-prev.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/carpentry.svg b/src/shared/Assets/carpentry.svg new file mode 100644 index 0000000..80036d5 --- /dev/null +++ b/src/shared/Assets/carpentry.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/ceiling-sm.svg b/src/shared/Assets/ceiling-sm.svg new file mode 100644 index 0000000..496feab --- /dev/null +++ b/src/shared/Assets/ceiling-sm.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/ceiling.svg b/src/shared/Assets/ceiling.svg new file mode 100644 index 0000000..f2a1e32 --- /dev/null +++ b/src/shared/Assets/ceiling.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/checkbox.svg b/src/shared/Assets/checkbox.svg new file mode 100644 index 0000000..ee7e432 --- /dev/null +++ b/src/shared/Assets/checkbox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/checked-mark-purple-bg.svg b/src/shared/Assets/checked-mark-purple-bg.svg new file mode 100644 index 0000000..41250ea --- /dev/null +++ b/src/shared/Assets/checked-mark-purple-bg.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/checked-mark.svg b/src/shared/Assets/checked-mark.svg new file mode 100644 index 0000000..942c15a --- /dev/null +++ b/src/shared/Assets/checked-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/chevron-down.svg b/src/shared/Assets/chevron-down.svg new file mode 100644 index 0000000..1f0b8bc --- /dev/null +++ b/src/shared/Assets/chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/chevron-next.svg b/src/shared/Assets/chevron-next.svg new file mode 100644 index 0000000..4e6e256 --- /dev/null +++ b/src/shared/Assets/chevron-next.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/chevron-previous.svg b/src/shared/Assets/chevron-previous.svg new file mode 100644 index 0000000..021e119 --- /dev/null +++ b/src/shared/Assets/chevron-previous.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/circle-16.svg b/src/shared/Assets/circle-16.svg new file mode 100644 index 0000000..591c0ac --- /dev/null +++ b/src/shared/Assets/circle-16.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/circle.svg b/src/shared/Assets/circle.svg new file mode 100644 index 0000000..c96373a --- /dev/null +++ b/src/shared/Assets/circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/cleaning.svg b/src/shared/Assets/cleaning.svg new file mode 100644 index 0000000..f99ba3c --- /dev/null +++ b/src/shared/Assets/cleaning.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/close-sm.svg b/src/shared/Assets/close-sm.svg new file mode 100644 index 0000000..c89fd1b --- /dev/null +++ b/src/shared/Assets/close-sm.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/close.svg b/src/shared/Assets/close.svg new file mode 100644 index 0000000..4367699 --- /dev/null +++ b/src/shared/Assets/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/closecircle.svg b/src/shared/Assets/closecircle.svg new file mode 100644 index 0000000..2693cab --- /dev/null +++ b/src/shared/Assets/closecircle.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/commercial.svg b/src/shared/Assets/commercial.svg new file mode 100644 index 0000000..243783a --- /dev/null +++ b/src/shared/Assets/commercial.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/company-arrow.svg b/src/shared/Assets/company-arrow.svg new file mode 100644 index 0000000..c72e489 --- /dev/null +++ b/src/shared/Assets/company-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/confirm-purple.svg b/src/shared/Assets/confirm-purple.svg new file mode 100644 index 0000000..c0464ac --- /dev/null +++ b/src/shared/Assets/confirm-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/confirm-sm.svg b/src/shared/Assets/confirm-sm.svg new file mode 100644 index 0000000..4a3dd32 --- /dev/null +++ b/src/shared/Assets/confirm-sm.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/confirm.svg b/src/shared/Assets/confirm.svg new file mode 100644 index 0000000..db4bffb --- /dev/null +++ b/src/shared/Assets/confirm.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/copy.svg b/src/shared/Assets/copy.svg new file mode 100644 index 0000000..a64846e --- /dev/null +++ b/src/shared/Assets/copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/crew.svg b/src/shared/Assets/crew.svg new file mode 100644 index 0000000..db4c544 --- /dev/null +++ b/src/shared/Assets/crew.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/cube-plus-lg.svg b/src/shared/Assets/cube-plus-lg.svg new file mode 100644 index 0000000..9ccbef4 --- /dev/null +++ b/src/shared/Assets/cube-plus-lg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/cube-plus.svg b/src/shared/Assets/cube-plus.svg new file mode 100644 index 0000000..1613973 --- /dev/null +++ b/src/shared/Assets/cube-plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/cube.svg b/src/shared/Assets/cube.svg new file mode 100644 index 0000000..07c1fbd --- /dev/null +++ b/src/shared/Assets/cube.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/custom-damage-add.svg b/src/shared/Assets/custom-damage-add.svg new file mode 100644 index 0000000..d3ce6dd --- /dev/null +++ b/src/shared/Assets/custom-damage-add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/custom-damage-type.svg b/src/shared/Assets/custom-damage-type.svg new file mode 100644 index 0000000..7c0c92b --- /dev/null +++ b/src/shared/Assets/custom-damage-type.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/custom-room.svg b/src/shared/Assets/custom-room.svg new file mode 100644 index 0000000..eb12a49 --- /dev/null +++ b/src/shared/Assets/custom-room.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/dashboard.svg b/src/shared/Assets/dashboard.svg new file mode 100644 index 0000000..0a2d87f --- /dev/null +++ b/src/shared/Assets/dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/deck.svg b/src/shared/Assets/deck.svg new file mode 100644 index 0000000..ce51d54 --- /dev/null +++ b/src/shared/Assets/deck.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/dehumidifier.svg b/src/shared/Assets/dehumidifier.svg new file mode 100644 index 0000000..5e6f412 --- /dev/null +++ b/src/shared/Assets/dehumidifier.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/den.svg b/src/shared/Assets/den.svg new file mode 100644 index 0000000..6c9fa10 --- /dev/null +++ b/src/shared/Assets/den.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/dining-room.svg b/src/shared/Assets/dining-room.svg new file mode 100644 index 0000000..aa693cd --- /dev/null +++ b/src/shared/Assets/dining-room.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/dot.svg b/src/shared/Assets/dot.svg new file mode 100644 index 0000000..590f218 --- /dev/null +++ b/src/shared/Assets/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/download-purple.svg b/src/shared/Assets/download-purple.svg new file mode 100644 index 0000000..62cdb7f --- /dev/null +++ b/src/shared/Assets/download-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/download.svg b/src/shared/Assets/download.svg new file mode 100644 index 0000000..fde363c --- /dev/null +++ b/src/shared/Assets/download.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/dropzone-background.svg b/src/shared/Assets/dropzone-background.svg new file mode 100644 index 0000000..4522d46 --- /dev/null +++ b/src/shared/Assets/dropzone-background.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/shared/Assets/drying-mat.svg b/src/shared/Assets/drying-mat.svg new file mode 100644 index 0000000..d086466 --- /dev/null +++ b/src/shared/Assets/drying-mat.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/shared/Assets/eastfacing.svg b/src/shared/Assets/eastfacing.svg new file mode 100644 index 0000000..d8b5f91 --- /dev/null +++ b/src/shared/Assets/eastfacing.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/edit-lg.svg b/src/shared/Assets/edit-lg.svg new file mode 100644 index 0000000..81d5bc8 --- /dev/null +++ b/src/shared/Assets/edit-lg.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/edit-md.svg b/src/shared/Assets/edit-md.svg new file mode 100644 index 0000000..58fc1c1 --- /dev/null +++ b/src/shared/Assets/edit-md.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/edit.svg b/src/shared/Assets/edit.svg new file mode 100644 index 0000000..d10ad77 --- /dev/null +++ b/src/shared/Assets/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/electrical-32.svg b/src/shared/Assets/electrical-32.svg new file mode 100644 index 0000000..4ed9732 --- /dev/null +++ b/src/shared/Assets/electrical-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/electrical-room.svg b/src/shared/Assets/electrical-room.svg new file mode 100644 index 0000000..5136243 --- /dev/null +++ b/src/shared/Assets/electrical-room.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/electrical.svg b/src/shared/Assets/electrical.svg new file mode 100644 index 0000000..659ca93 --- /dev/null +++ b/src/shared/Assets/electrical.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/elevator.svg b/src/shared/Assets/elevator.svg new file mode 100644 index 0000000..fe5f747 --- /dev/null +++ b/src/shared/Assets/elevator.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/email-new.svg b/src/shared/Assets/email-new.svg new file mode 100644 index 0000000..bdb15b7 --- /dev/null +++ b/src/shared/Assets/email-new.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/employee-phone.svg b/src/shared/Assets/employee-phone.svg new file mode 100644 index 0000000..a7fbd98 --- /dev/null +++ b/src/shared/Assets/employee-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/ensuite.svg b/src/shared/Assets/ensuite.svg new file mode 100644 index 0000000..15be024 --- /dev/null +++ b/src/shared/Assets/ensuite.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/equipment-log.svg b/src/shared/Assets/equipment-log.svg new file mode 100644 index 0000000..88af3a0 --- /dev/null +++ b/src/shared/Assets/equipment-log.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/exterior-32.svg b/src/shared/Assets/exterior-32.svg new file mode 100644 index 0000000..03a54cc --- /dev/null +++ b/src/shared/Assets/exterior-32.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/exterior-add.svg b/src/shared/Assets/exterior-add.svg new file mode 100644 index 0000000..2ae851b --- /dev/null +++ b/src/shared/Assets/exterior-add.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/exterior.svg b/src/shared/Assets/exterior.svg new file mode 100644 index 0000000..75ec9c5 --- /dev/null +++ b/src/shared/Assets/exterior.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/eye-closed.svg b/src/shared/Assets/eye-closed.svg new file mode 100644 index 0000000..ecfd503 --- /dev/null +++ b/src/shared/Assets/eye-closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/eye.svg b/src/shared/Assets/eye.svg new file mode 100644 index 0000000..c28398a --- /dev/null +++ b/src/shared/Assets/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/facebook.svg b/src/shared/Assets/facebook.svg new file mode 100644 index 0000000..93c9e64 --- /dev/null +++ b/src/shared/Assets/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/filter.svg b/src/shared/Assets/filter.svg new file mode 100644 index 0000000..ea7d219 --- /dev/null +++ b/src/shared/Assets/filter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/fire.svg b/src/shared/Assets/fire.svg new file mode 100644 index 0000000..4a403b5 --- /dev/null +++ b/src/shared/Assets/fire.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/flag-outline-purple.svg b/src/shared/Assets/flag-outline-purple.svg new file mode 100644 index 0000000..676aeb6 --- /dev/null +++ b/src/shared/Assets/flag-outline-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/flag-photo.svg b/src/shared/Assets/flag-photo.svg new file mode 100644 index 0000000..fef2f8f --- /dev/null +++ b/src/shared/Assets/flag-photo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/flag-purple.svg b/src/shared/Assets/flag-purple.svg new file mode 100644 index 0000000..fcd00a1 --- /dev/null +++ b/src/shared/Assets/flag-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/flag.svg b/src/shared/Assets/flag.svg new file mode 100644 index 0000000..7da6872 --- /dev/null +++ b/src/shared/Assets/flag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/flagged-photo.svg b/src/shared/Assets/flagged-photo.svg new file mode 100644 index 0000000..fb77be1 --- /dev/null +++ b/src/shared/Assets/flagged-photo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/floor-add.svg b/src/shared/Assets/floor-add.svg new file mode 100644 index 0000000..ed2ff7b --- /dev/null +++ b/src/shared/Assets/floor-add.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/floor-sm.svg b/src/shared/Assets/floor-sm.svg new file mode 100644 index 0000000..15f838f --- /dev/null +++ b/src/shared/Assets/floor-sm.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/floor.svg b/src/shared/Assets/floor.svg new file mode 100644 index 0000000..d708dbd --- /dev/null +++ b/src/shared/Assets/floor.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/Assets/flooring-32.svg b/src/shared/Assets/flooring-32.svg new file mode 100644 index 0000000..95bd64d --- /dev/null +++ b/src/shared/Assets/flooring-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/flooring.svg b/src/shared/Assets/flooring.svg new file mode 100644 index 0000000..78c55c5 --- /dev/null +++ b/src/shared/Assets/flooring.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/funnel-fill.svg b/src/shared/Assets/funnel-fill.svg new file mode 100644 index 0000000..5f16f16 --- /dev/null +++ b/src/shared/Assets/funnel-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/galleryplaceholder.svg b/src/shared/Assets/galleryplaceholder.svg new file mode 100644 index 0000000..7f44c29 --- /dev/null +++ b/src/shared/Assets/galleryplaceholder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/garage.svg b/src/shared/Assets/garage.svg new file mode 100644 index 0000000..e9a7d23 --- /dev/null +++ b/src/shared/Assets/garage.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/google.svg b/src/shared/Assets/google.svg new file mode 100644 index 0000000..b42e503 --- /dev/null +++ b/src/shared/Assets/google.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/gym.svg b/src/shared/Assets/gym.svg new file mode 100644 index 0000000..5f81499 --- /dev/null +++ b/src/shared/Assets/gym.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/hallway.svg b/src/shared/Assets/hallway.svg new file mode 100644 index 0000000..6bc947b --- /dev/null +++ b/src/shared/Assets/hallway.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/hamburger-menu.svg b/src/shared/Assets/hamburger-menu.svg new file mode 100644 index 0000000..527c6b9 --- /dev/null +++ b/src/shared/Assets/hamburger-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/hand.svg b/src/shared/Assets/hand.svg new file mode 100644 index 0000000..5b96bf4 --- /dev/null +++ b/src/shared/Assets/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/shared/Assets/highrise-small.svg b/src/shared/Assets/highrise-small.svg new file mode 100644 index 0000000..e6d79d8 --- /dev/null +++ b/src/shared/Assets/highrise-small.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/highrise.svg b/src/shared/Assets/highrise.svg new file mode 100644 index 0000000..e1886c8 --- /dev/null +++ b/src/shared/Assets/highrise.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/impact.svg b/src/shared/Assets/impact.svg new file mode 100644 index 0000000..7f985af --- /dev/null +++ b/src/shared/Assets/impact.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/info.svg b/src/shared/Assets/info.svg new file mode 100644 index 0000000..d6a3431 --- /dev/null +++ b/src/shared/Assets/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/inject-dryer.svg b/src/shared/Assets/inject-dryer.svg new file mode 100644 index 0000000..91fcbe7 --- /dev/null +++ b/src/shared/Assets/inject-dryer.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/inspection.svg b/src/shared/Assets/inspection.svg new file mode 100644 index 0000000..6efc0fc --- /dev/null +++ b/src/shared/Assets/inspection.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/kitchen.svg b/src/shared/Assets/kitchen.svg new file mode 100644 index 0000000..bdc0649 --- /dev/null +++ b/src/shared/Assets/kitchen.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/landscape.svg b/src/shared/Assets/landscape.svg new file mode 100644 index 0000000..458f88f --- /dev/null +++ b/src/shared/Assets/landscape.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/laundry.svg b/src/shared/Assets/laundry.svg new file mode 100644 index 0000000..9cbbd2b --- /dev/null +++ b/src/shared/Assets/laundry.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/link-open.svg b/src/shared/Assets/link-open.svg new file mode 100644 index 0000000..c28c2c1 --- /dev/null +++ b/src/shared/Assets/link-open.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/link.svg b/src/shared/Assets/link.svg new file mode 100644 index 0000000..6a7f5cf --- /dev/null +++ b/src/shared/Assets/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/living-room.svg b/src/shared/Assets/living-room.svg new file mode 100644 index 0000000..9814081 --- /dev/null +++ b/src/shared/Assets/living-room.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/lobby.svg b/src/shared/Assets/lobby.svg new file mode 100644 index 0000000..0249db7 --- /dev/null +++ b/src/shared/Assets/lobby.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/logo-horizontal.svg b/src/shared/Assets/logo-horizontal.svg new file mode 100644 index 0000000..2df0a13 --- /dev/null +++ b/src/shared/Assets/logo-horizontal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/logo-icon.svg b/src/shared/Assets/logo-icon.svg new file mode 100644 index 0000000..67e756b --- /dev/null +++ b/src/shared/Assets/logo-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/Assets/logo-mobile.svg b/src/shared/Assets/logo-mobile.svg new file mode 100644 index 0000000..2f361db --- /dev/null +++ b/src/shared/Assets/logo-mobile.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/logo.png b/src/shared/Assets/logo.png new file mode 100644 index 0000000..990248e Binary files /dev/null and b/src/shared/Assets/logo.png differ diff --git a/src/shared/Assets/logo.svg b/src/shared/Assets/logo.svg new file mode 100644 index 0000000..9112b06 --- /dev/null +++ b/src/shared/Assets/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/lunchroom.svg b/src/shared/Assets/lunchroom.svg new file mode 100644 index 0000000..5aa4c71 --- /dev/null +++ b/src/shared/Assets/lunchroom.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/maintenance-room.svg b/src/shared/Assets/maintenance-room.svg new file mode 100644 index 0000000..99c7533 --- /dev/null +++ b/src/shared/Assets/maintenance-room.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/meeting-room.svg b/src/shared/Assets/meeting-room.svg new file mode 100644 index 0000000..fd9547f --- /dev/null +++ b/src/shared/Assets/meeting-room.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/misc.svg b/src/shared/Assets/misc.svg new file mode 100644 index 0000000..45fc15a --- /dev/null +++ b/src/shared/Assets/misc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/mobile-app-icon.svg b/src/shared/Assets/mobile-app-icon.svg new file mode 100644 index 0000000..0df0725 --- /dev/null +++ b/src/shared/Assets/mobile-app-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/modal-close.svg b/src/shared/Assets/modal-close.svg new file mode 100644 index 0000000..c89fd1b --- /dev/null +++ b/src/shared/Assets/modal-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/moisture-log.svg b/src/shared/Assets/moisture-log.svg new file mode 100644 index 0000000..9ca8e98 --- /dev/null +++ b/src/shared/Assets/moisture-log.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/mold.svg b/src/shared/Assets/mold.svg new file mode 100644 index 0000000..1a891c2 --- /dev/null +++ b/src/shared/Assets/mold.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/multiunit-lg.svg b/src/shared/Assets/multiunit-lg.svg new file mode 100644 index 0000000..4690850 --- /dev/null +++ b/src/shared/Assets/multiunit-lg.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/natural.svg b/src/shared/Assets/natural.svg new file mode 100644 index 0000000..1b3beb1 --- /dev/null +++ b/src/shared/Assets/natural.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/shared/Assets/newzealandflag.svg b/src/shared/Assets/newzealandflag.svg new file mode 100644 index 0000000..53d7787 --- /dev/null +++ b/src/shared/Assets/newzealandflag.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/no-company.svg b/src/shared/Assets/no-company.svg new file mode 100644 index 0000000..1fc4998 --- /dev/null +++ b/src/shared/Assets/no-company.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/shared/Assets/northfacing.svg b/src/shared/Assets/northfacing.svg new file mode 100644 index 0000000..540db79 --- /dev/null +++ b/src/shared/Assets/northfacing.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/not-found.svg b/src/shared/Assets/not-found.svg new file mode 100644 index 0000000..de5a728 --- /dev/null +++ b/src/shared/Assets/not-found.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/office-building.svg b/src/shared/Assets/office-building.svg new file mode 100644 index 0000000..81e15f2 --- /dev/null +++ b/src/shared/Assets/office-building.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/office.svg b/src/shared/Assets/office.svg new file mode 100644 index 0000000..e345823 --- /dev/null +++ b/src/shared/Assets/office.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/patio.svg b/src/shared/Assets/patio.svg new file mode 100644 index 0000000..eaf0bd0 --- /dev/null +++ b/src/shared/Assets/patio.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/people-pink-medium.svg b/src/shared/Assets/people-pink-medium.svg new file mode 100644 index 0000000..06038d1 --- /dev/null +++ b/src/shared/Assets/people-pink-medium.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/people-pink-small.svg b/src/shared/Assets/people-pink-small.svg new file mode 100644 index 0000000..4038292 --- /dev/null +++ b/src/shared/Assets/people-pink-small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/people-pink.svg b/src/shared/Assets/people-pink.svg new file mode 100644 index 0000000..6c61065 --- /dev/null +++ b/src/shared/Assets/people-pink.svg @@ -0,0 +1,8 @@ + + + + Layer 1 + + + + \ No newline at end of file diff --git a/src/shared/Assets/people.svg b/src/shared/Assets/people.svg new file mode 100644 index 0000000..da28b1f --- /dev/null +++ b/src/shared/Assets/people.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/person-purple.svg b/src/shared/Assets/person-purple.svg new file mode 100644 index 0000000..378e671 --- /dev/null +++ b/src/shared/Assets/person-purple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/person.svg b/src/shared/Assets/person.svg new file mode 100644 index 0000000..478d566 --- /dev/null +++ b/src/shared/Assets/person.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/phone.svg b/src/shared/Assets/phone.svg new file mode 100644 index 0000000..4adbbbc --- /dev/null +++ b/src/shared/Assets/phone.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/src/shared/Assets/photo-bookmark.svg b/src/shared/Assets/photo-bookmark.svg new file mode 100644 index 0000000..7999333 --- /dev/null +++ b/src/shared/Assets/photo-bookmark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/Assets/photo-flag.svg b/src/shared/Assets/photo-flag.svg new file mode 100644 index 0000000..9ad800e --- /dev/null +++ b/src/shared/Assets/photo-flag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/Assets/photo-note.svg b/src/shared/Assets/photo-note.svg new file mode 100644 index 0000000..983e83b --- /dev/null +++ b/src/shared/Assets/photo-note.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/photo-share-error.svg b/src/shared/Assets/photo-share-error.svg new file mode 100644 index 0000000..ae0c606 --- /dev/null +++ b/src/shared/Assets/photo-share-error.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/photo-share.svg b/src/shared/Assets/photo-share.svg new file mode 100644 index 0000000..82d03ed --- /dev/null +++ b/src/shared/Assets/photo-share.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/pin.svg b/src/shared/Assets/pin.svg new file mode 100644 index 0000000..fe0afcc --- /dev/null +++ b/src/shared/Assets/pin.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/pinActive.svg b/src/shared/Assets/pinActive.svg new file mode 100644 index 0000000..8b69049 --- /dev/null +++ b/src/shared/Assets/pinActive.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/plaza.svg b/src/shared/Assets/plaza.svg new file mode 100644 index 0000000..bd8c642 --- /dev/null +++ b/src/shared/Assets/plaza.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/plumbing-32.svg b/src/shared/Assets/plumbing-32.svg new file mode 100644 index 0000000..582ce3e --- /dev/null +++ b/src/shared/Assets/plumbing-32.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/plumbing.svg b/src/shared/Assets/plumbing.svg new file mode 100644 index 0000000..ba66604 --- /dev/null +++ b/src/shared/Assets/plumbing.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/plus.svg b/src/shared/Assets/plus.svg new file mode 100644 index 0000000..23445b9 --- /dev/null +++ b/src/shared/Assets/plus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/Assets/pool.svg b/src/shared/Assets/pool.svg new file mode 100644 index 0000000..379fcea --- /dev/null +++ b/src/shared/Assets/pool.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/private-office.svg b/src/shared/Assets/private-office.svg new file mode 100644 index 0000000..e140b41 --- /dev/null +++ b/src/shared/Assets/private-office.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/projects.svg b/src/shared/Assets/projects.svg new file mode 100644 index 0000000..9ac37af --- /dev/null +++ b/src/shared/Assets/projects.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/protection.svg b/src/shared/Assets/protection.svg new file mode 100644 index 0000000..16c8fb6 --- /dev/null +++ b/src/shared/Assets/protection.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/radio.svg b/src/shared/Assets/radio.svg new file mode 100644 index 0000000..2c241a1 --- /dev/null +++ b/src/shared/Assets/radio.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/reception.svg b/src/shared/Assets/reception.svg new file mode 100644 index 0000000..cd080d9 --- /dev/null +++ b/src/shared/Assets/reception.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/reports-type-compact.svg b/src/shared/Assets/reports-type-compact.svg new file mode 100644 index 0000000..b3aa1fe --- /dev/null +++ b/src/shared/Assets/reports-type-compact.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/reports-type-expanded.svg b/src/shared/Assets/reports-type-expanded.svg new file mode 100644 index 0000000..5f9d1e0 --- /dev/null +++ b/src/shared/Assets/reports-type-expanded.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/shared/Assets/reports-type-large.svg b/src/shared/Assets/reports-type-large.svg new file mode 100644 index 0000000..87cf7eb --- /dev/null +++ b/src/shared/Assets/reports-type-large.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/restroom.svg b/src/shared/Assets/restroom.svg new file mode 100644 index 0000000..2d4be90 --- /dev/null +++ b/src/shared/Assets/restroom.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/roof.svg b/src/shared/Assets/roof.svg new file mode 100644 index 0000000..59287b0 --- /dev/null +++ b/src/shared/Assets/roof.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/Assets/roofing-32.svg b/src/shared/Assets/roofing-32.svg new file mode 100644 index 0000000..fb0435a --- /dev/null +++ b/src/shared/Assets/roofing-32.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/roofing.svg b/src/shared/Assets/roofing.svg new file mode 100644 index 0000000..a83d810 --- /dev/null +++ b/src/shared/Assets/roofing.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/search.svg b/src/shared/Assets/search.svg new file mode 100644 index 0000000..2cf858f --- /dev/null +++ b/src/shared/Assets/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/share-32.svg b/src/shared/Assets/share-32.svg new file mode 100644 index 0000000..69aa640 --- /dev/null +++ b/src/shared/Assets/share-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/share.svg b/src/shared/Assets/share.svg new file mode 100644 index 0000000..352e599 --- /dev/null +++ b/src/shared/Assets/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/shop.svg b/src/shared/Assets/shop.svg new file mode 100644 index 0000000..24b4f44 --- /dev/null +++ b/src/shared/Assets/shop.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/side-bar-close.svg b/src/shared/Assets/side-bar-close.svg new file mode 100644 index 0000000..07d72e0 --- /dev/null +++ b/src/shared/Assets/side-bar-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/side-bar-left-arrow.svg b/src/shared/Assets/side-bar-left-arrow.svg new file mode 100644 index 0000000..d0486bc --- /dev/null +++ b/src/shared/Assets/side-bar-left-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/side-bar-right-arrow.svg b/src/shared/Assets/side-bar-right-arrow.svg new file mode 100644 index 0000000..e8f0905 --- /dev/null +++ b/src/shared/Assets/side-bar-right-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/single-home-sm.svg b/src/shared/Assets/single-home-sm.svg new file mode 100644 index 0000000..70f7f13 --- /dev/null +++ b/src/shared/Assets/single-home-sm.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/single-home.svg b/src/shared/Assets/single-home.svg new file mode 100644 index 0000000..8f98809 --- /dev/null +++ b/src/shared/Assets/single-home.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/smoke.svg b/src/shared/Assets/smoke.svg new file mode 100644 index 0000000..64efa95 --- /dev/null +++ b/src/shared/Assets/smoke.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/shared/Assets/sms-icon.svg b/src/shared/Assets/sms-icon.svg new file mode 100644 index 0000000..25a96d4 --- /dev/null +++ b/src/shared/Assets/sms-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/Assets/sms.svg b/src/shared/Assets/sms.svg new file mode 100644 index 0000000..f33e87a --- /dev/null +++ b/src/shared/Assets/sms.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/southfacing.svg b/src/shared/Assets/southfacing.svg new file mode 100644 index 0000000..bb64bf9 --- /dev/null +++ b/src/shared/Assets/southfacing.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/Assets/square.svg b/src/shared/Assets/square.svg new file mode 100644 index 0000000..f917974 --- /dev/null +++ b/src/shared/Assets/square.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/stairway.svg b/src/shared/Assets/stairway.svg new file mode 100644 index 0000000..2c06b88 --- /dev/null +++ b/src/shared/Assets/stairway.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/storage.svg b/src/shared/Assets/storage.svg new file mode 100644 index 0000000..b7979b8 --- /dev/null +++ b/src/shared/Assets/storage.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/structural-32.svg b/src/shared/Assets/structural-32.svg new file mode 100644 index 0000000..a7b3e30 --- /dev/null +++ b/src/shared/Assets/structural-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/structural.svg b/src/shared/Assets/structural.svg new file mode 100644 index 0000000..b275d31 --- /dev/null +++ b/src/shared/Assets/structural.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/support.svg b/src/shared/Assets/support.svg new file mode 100644 index 0000000..5bdfbbe --- /dev/null +++ b/src/shared/Assets/support.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/three-dots.svg b/src/shared/Assets/three-dots.svg new file mode 100644 index 0000000..2b46428 --- /dev/null +++ b/src/shared/Assets/three-dots.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/trash-md.svg b/src/shared/Assets/trash-md.svg new file mode 100644 index 0000000..c754785 --- /dev/null +++ b/src/shared/Assets/trash-md.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/trash-photo.svg b/src/shared/Assets/trash-photo.svg new file mode 100644 index 0000000..f24163d --- /dev/null +++ b/src/shared/Assets/trash-photo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/trash-sm-dark.svg b/src/shared/Assets/trash-sm-dark.svg new file mode 100644 index 0000000..420f71f --- /dev/null +++ b/src/shared/Assets/trash-sm-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/trash-sm-disabled.svg b/src/shared/Assets/trash-sm-disabled.svg new file mode 100644 index 0000000..ecbe567 --- /dev/null +++ b/src/shared/Assets/trash-sm-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/trash-sm.svg b/src/shared/Assets/trash-sm.svg new file mode 100644 index 0000000..2342716 --- /dev/null +++ b/src/shared/Assets/trash-sm.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/trash.svg b/src/shared/Assets/trash.svg new file mode 100644 index 0000000..bf8773e --- /dev/null +++ b/src/shared/Assets/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/Assets/unit-add.svg b/src/shared/Assets/unit-add.svg new file mode 100644 index 0000000..89d2fc5 --- /dev/null +++ b/src/shared/Assets/unit-add.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/shared/Assets/unit-lg.svg b/src/shared/Assets/unit-lg.svg new file mode 100644 index 0000000..536a176 --- /dev/null +++ b/src/shared/Assets/unit-lg.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/unit-sm.svg b/src/shared/Assets/unit-sm.svg new file mode 100644 index 0000000..b1d1799 --- /dev/null +++ b/src/shared/Assets/unit-sm.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/unit.svg b/src/shared/Assets/unit.svg new file mode 100644 index 0000000..42d368a --- /dev/null +++ b/src/shared/Assets/unit.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/Assets/unitedkingdomflag.svg b/src/shared/Assets/unitedkingdomflag.svg new file mode 100644 index 0000000..e8ff378 --- /dev/null +++ b/src/shared/Assets/unitedkingdomflag.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/unitedstatesflag.svg b/src/shared/Assets/unitedstatesflag.svg new file mode 100644 index 0000000..249e4e1 --- /dev/null +++ b/src/shared/Assets/unitedstatesflag.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/utilityroom.svg b/src/shared/Assets/utilityroom.svg new file mode 100644 index 0000000..4e86a0a --- /dev/null +++ b/src/shared/Assets/utilityroom.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/Assets/walls-32.svg b/src/shared/Assets/walls-32.svg new file mode 100644 index 0000000..1afd88b --- /dev/null +++ b/src/shared/Assets/walls-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/walls.svg b/src/shared/Assets/walls.svg new file mode 100644 index 0000000..a69f97f --- /dev/null +++ b/src/shared/Assets/walls.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/water.svg b/src/shared/Assets/water.svg new file mode 100644 index 0000000..4b07b9e --- /dev/null +++ b/src/shared/Assets/water.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/Assets/welcome-aboard.svg b/src/shared/Assets/welcome-aboard.svg new file mode 100644 index 0000000..c62b0ec --- /dev/null +++ b/src/shared/Assets/welcome-aboard.svg @@ -0,0 +1,362 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/Assets/westfacing.svg b/src/shared/Assets/westfacing.svg new file mode 100644 index 0000000..dc1f7a0 --- /dev/null +++ b/src/shared/Assets/westfacing.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/components/Address/CountryAutocomplete/CountryAutocomplete.tsx b/src/shared/components/Address/CountryAutocomplete/CountryAutocomplete.tsx new file mode 100644 index 0000000..38af02e --- /dev/null +++ b/src/shared/components/Address/CountryAutocomplete/CountryAutocomplete.tsx @@ -0,0 +1,63 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { TextBox } from 'Components/TextBox'; +import { FieldList } from 'Components/Address/FieldList'; +import { Icon } from 'Components/Icons'; + +import classes from './countryAutocomplete.module.css'; + +interface Props { + className?: string; + country: string; + countries: Array; + invalid?: boolean; + showDropDown: boolean; + showCaretIcon: boolean; + onChangeCountry: (e: any) => void; + onSelectItem: (e: any) => void; + onClickCaretIcon: (e: any) => void; +} + +const CountryAutocomplete = ({ + className, + country, + countries, + invalid, + onChangeCountry, + onSelectItem, + showDropDown, + showCaretIcon, + onClickCaretIcon, +}: Props) => ( +
+ + + {showCaretIcon && ( + + )} + + {countries.length > 0 && ( + + )} +
+); + +CountryAutocomplete.defaultProps = { + className: undefined, + invalid: false, +}; + +const CountryAutocompleteMemo = memo(CountryAutocomplete, areEqual); + +export { CountryAutocompleteMemo as CountryAutocomplete }; diff --git a/src/shared/components/Address/CountryAutocomplete/countryAutocomplete.module.css b/src/shared/components/Address/CountryAutocomplete/countryAutocomplete.module.css new file mode 100644 index 0000000..f645a90 --- /dev/null +++ b/src/shared/components/Address/CountryAutocomplete/countryAutocomplete.module.css @@ -0,0 +1,53 @@ +.validateField { + background-image: unset !important; + border-color: unset !important; + border-top: unset !important; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + background-position: unset !important; + background-repeat: unset !important; + background-size: unset !important; + padding-top: 0.375rem !important; + padding-bottom: 0.375rem !important; + padding-right: 0.75rem !important; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000 !important; + padding-left: 8px; +} + +.validField { + border-bottom: 1px solid #d2cfda !important; +} + +.invalidField { + background-color: #fff0f0; + border-bottom: 1px solid #e82828 !important; +} + +.validateField::placeholder { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + /* Placeholder text color */ + color: #b3abc6; + /* opacity: 1; */ + /* Firefox */ +} + +.validateField:focus { + box-shadow: unset !important; + background-color: unset; +} + +.icon { + position: absolute; + right: 0; + top: 40%; +} diff --git a/src/shared/components/Address/CountryAutocomplete/index.ts b/src/shared/components/Address/CountryAutocomplete/index.ts new file mode 100644 index 0000000..66f0d9e --- /dev/null +++ b/src/shared/components/Address/CountryAutocomplete/index.ts @@ -0,0 +1 @@ +export { CountryAutocomplete } from './CountryAutocomplete'; diff --git a/src/shared/components/Address/FieldList/FieldList.tsx b/src/shared/components/Address/FieldList/FieldList.tsx new file mode 100644 index 0000000..5600813 --- /dev/null +++ b/src/shared/components/Address/FieldList/FieldList.tsx @@ -0,0 +1,40 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { ListItem } from './ListItem'; + +import classes from './fieldList.module.css'; + +type ListTypes = { + id: number; + name: string; +}; + +interface Props { + id: string; + className?: string; + list: Array; + showDropDown: boolean; + onSelectItem: (e: any) => void; +} + +const FieldList = ({ id, className, list, onSelectItem, showDropDown }: Props) => ( +
    + {list.map((item) => ( + + ))} +
+); + +FieldList.defaultProps = { + className: undefined, +}; + +const FieldListMemo = memo(FieldList, areEqual); + +export { FieldListMemo as FieldList }; diff --git a/src/shared/components/Address/FieldList/ListItem/ListItem.tsx b/src/shared/components/Address/FieldList/ListItem/ListItem.tsx new file mode 100644 index 0000000..afd0601 --- /dev/null +++ b/src/shared/components/Address/FieldList/ListItem/ListItem.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Anchor } from 'Components/Anchor'; + +import classes from './listItem.module.css'; + +interface Props { + id: number; + name: string; + onSelectItem: (e: any) => void; +} + +const ListItem = ({ id, name, onSelectItem }: Props) => ( +
  • + + {name} + +
    • +); + +const ListItemMemo = memo(ListItem, areEqual); + +export { ListItemMemo as ListItem }; diff --git a/src/shared/components/Address/FieldList/ListItem/index.ts b/src/shared/components/Address/FieldList/ListItem/index.ts new file mode 100644 index 0000000..fe0e47c --- /dev/null +++ b/src/shared/components/Address/FieldList/ListItem/index.ts @@ -0,0 +1 @@ +export { ListItem } from "./ListItem"; diff --git a/src/shared/components/Address/FieldList/ListItem/listItem.module.css b/src/shared/components/Address/FieldList/ListItem/listItem.module.css new file mode 100644 index 0000000..0a2f388 --- /dev/null +++ b/src/shared/components/Address/FieldList/ListItem/listItem.module.css @@ -0,0 +1,14 @@ +.listItemText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 21px; + color: #000000; + padding: 16px 0; + border-bottom: 1px solid #E8E7ED; +} + +.listItemText:hover { + background-color: transparent !important; +} diff --git a/src/shared/components/Address/FieldList/fieldList.module.css b/src/shared/components/Address/FieldList/fieldList.module.css new file mode 100644 index 0000000..e04e726 --- /dev/null +++ b/src/shared/components/Address/FieldList/fieldList.module.css @@ -0,0 +1,17 @@ +.fieldListBase { + inset: unset!important; + transform: unset!important; + background: #FFFFFF; + border: 1px solid #E8E7ED; + box-sizing: border-box; + box-shadow: 0px -3px 6px rgba(142, 134, 163, 0.1); + border-radius: 0px 0px 16px 16px; + width: 100%; + height: 292px; + padding: 0 26px 10px; + overflow-y: auto; +} + +.fieldListBase:focus, .fieldListBase:focus-visible { + outline: unset!important; +} diff --git a/src/shared/components/Address/FieldList/index.ts b/src/shared/components/Address/FieldList/index.ts new file mode 100644 index 0000000..9f85346 --- /dev/null +++ b/src/shared/components/Address/FieldList/index.ts @@ -0,0 +1 @@ +export { FieldList } from "./FieldList"; diff --git a/src/shared/components/Address/GoogleAutocomplete/GoogleAutocomplete.tsx b/src/shared/components/Address/GoogleAutocomplete/GoogleAutocomplete.tsx new file mode 100644 index 0000000..39ddbc1 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/GoogleAutocomplete.tsx @@ -0,0 +1,60 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import ClickOutsideListener from 'HOC/ClickOutsideListener'; + +import { Label } from 'Components/Label'; +import { TextBox } from 'Components/TextBox'; +import { ValidateBackGround } from 'Components/Validation'; +import { PlacePredictions } from 'Components/Address/GoogleAutocomplete/PlacePredictions'; + +import classes from './googleAutocomplete.module.css'; + +interface Props { + address: string; + isValid?: boolean; + placePredictions: any; + showDropDown: boolean; + onChangeAddress: (e: any) => void; + onSelectItem: (e: any) => void; + onblur: (e: any) => void; +} + +const GoogleAutocomplete = ({ + address, + onChangeAddress, + isValid, + placePredictions, + onSelectItem, + showDropDown, + onblur, +}: Props) => ( +
    + + + + + + + +
    +); + +GoogleAutocomplete.defaultProps = { + isValid: true, +}; + +const GoogleAutocompleteMemo = memo(GoogleAutocomplete, areEqual); + +export { GoogleAutocompleteMemo as GoogleAutocomplete }; diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/Place.tsx b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/Place.tsx new file mode 100644 index 0000000..3ca007e --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/Place.tsx @@ -0,0 +1,37 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Button } from 'Components/Button'; + +import classes from './place.module.css'; + +type PlaceType = { + placeId: string; + mainText: string; + secondaryText: string; +}; + +interface Props { + place: PlaceType; + onSelectItem: (e: any) => void; +} + +const Place = ({ place, onSelectItem }: Props) => ( +
  • + +
    • +); + +const PlaceMemo = memo(Place, areEqual); + +export { PlaceMemo as Place }; diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/index.ts b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/index.ts new file mode 100644 index 0000000..b9da560 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/index.ts @@ -0,0 +1 @@ +export { Place } from "./Place"; diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/place.module.css b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/place.module.css new file mode 100644 index 0000000..97b28e4 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/Place/place.module.css @@ -0,0 +1,35 @@ +.placeText { + display: flex; + flex-direction: column; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 21px; + color: #000000; + padding: 16px 0; + border-bottom: 1px solid #E8E7ED; +} + +.placeText:hover { + background-color: transparent !important; +} + +.mainText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 21px; + color: #000000; +} + +.secondaryText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; + color: #777185; + margin-top: 5px; +} diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/PlacePredictions.tsx b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/PlacePredictions.tsx new file mode 100644 index 0000000..0e3fce7 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/PlacePredictions.tsx @@ -0,0 +1,31 @@ +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; + +import { Place } from "Components/Address/GoogleAutocomplete/PlacePredictions/Place"; + +import classes from "./placePredictions.module.css"; + +type PlacesType = { + placeId: string; + mainText: string; + secondaryText: string; +}; + +interface Props { + placePredictions: Array; + showDropDown: boolean; + onSelectItem: (e: any) => void; +} + +const PlacePredictions = ({ placePredictions, showDropDown, onSelectItem }: Props) => ( +
      + {placePredictions.map((place) => ( + + ))} +
    +); + +const PlacePredictionsMemo = memo(PlacePredictions, areEqual); + +export { PlacePredictionsMemo as PlacePredictions }; diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/index.ts b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/index.ts new file mode 100644 index 0000000..8aca7b7 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/index.ts @@ -0,0 +1 @@ +export { PlacePredictions } from "./PlacePredictions"; diff --git a/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/placePredictions.module.css b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/placePredictions.module.css new file mode 100644 index 0000000..4d09a45 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/PlacePredictions/placePredictions.module.css @@ -0,0 +1,17 @@ +.placeListBase { + inset: unset!important; + transform: unset!important; + background: #FFFFFF; + border: 1px solid #E8E7ED; + box-sizing: border-box; + box-shadow: 0px -3px 6px rgba(142, 134, 163, 0.1); + border-radius: 0px 0px 16px 16px; + width: 100%; + height: 463px; + padding: 0 26px 10px; + overflow-y: auto; + } + +.placeListBase:focus, .placeListBase:focus-visible { + outline: unset!important; +} diff --git a/src/shared/components/Address/GoogleAutocomplete/googleAutocomplete.module.css b/src/shared/components/Address/GoogleAutocomplete/googleAutocomplete.module.css new file mode 100644 index 0000000..38f4c56 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/googleAutocomplete.module.css @@ -0,0 +1,50 @@ + +.label { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 20px; + color: #5b476b; + padding-left: 8px; +} + +.validateField { + background-image: unset !important; + border-color: unset !important; + border-top: unset !important; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + background-position: unset !important; + background-repeat: unset !important; + background-size: unset !important; + padding-top: 0.375rem !important; + padding-bottom: 0.375rem !important; + padding-right: 0.75rem !important; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000 !important; + padding-left: 8px; +} + +.validField { + border-bottom: 1px solid #d2cfda !important; +} + +.validateField::placeholder { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #b3abc6; +} + +.validateField:focus { + box-shadow: unset !important; + background-color: unset; +} diff --git a/src/shared/components/Address/GoogleAutocomplete/index.ts b/src/shared/components/Address/GoogleAutocomplete/index.ts new file mode 100644 index 0000000..d2c2b03 --- /dev/null +++ b/src/shared/components/Address/GoogleAutocomplete/index.ts @@ -0,0 +1 @@ +export { GoogleAutocomplete } from "./GoogleAutocomplete"; diff --git a/src/shared/components/Address/ProvinceAutocomplete/ProvinceAutocomplete.tsx b/src/shared/components/Address/ProvinceAutocomplete/ProvinceAutocomplete.tsx new file mode 100644 index 0000000..b40bdd5 --- /dev/null +++ b/src/shared/components/Address/ProvinceAutocomplete/ProvinceAutocomplete.tsx @@ -0,0 +1,61 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { TextBox } from 'Components/TextBox'; +import { FieldList } from 'Components/Address/FieldList'; +import { Icon } from 'Components/Icons'; + +import classes from './provinceAutocomplete.module.css'; + +interface Props { + className?: string; + province: string; + provinces: Array; + invalid?: boolean; + showDropDown: boolean; + showCaretIcon: boolean; + onChangeProvince: (e: any) => void; + onSelectItem: (e: any) => void; + onClickCaretIcon: (e: any) => void; +} + +const ProvinceAutocomplete = ({ + className, + province, + provinces, + invalid, + onChangeProvince, + onSelectItem, + showDropDown, + showCaretIcon, + onClickCaretIcon, +}: Props) => ( +
    + + {showCaretIcon && ( + + )} + {provinces.length > 0 && ( + + )} +
    +); + +ProvinceAutocomplete.defaultProps = { + className: undefined, + invalid: false, +}; + +const ProvinceAutocompleteMemo = memo(ProvinceAutocomplete, areEqual); + +export { ProvinceAutocompleteMemo as ProvinceAutocomplete }; diff --git a/src/shared/components/Address/ProvinceAutocomplete/index.ts b/src/shared/components/Address/ProvinceAutocomplete/index.ts new file mode 100644 index 0000000..ac1eeb6 --- /dev/null +++ b/src/shared/components/Address/ProvinceAutocomplete/index.ts @@ -0,0 +1 @@ +export { ProvinceAutocomplete } from './ProvinceAutocomplete'; diff --git a/src/shared/components/Address/ProvinceAutocomplete/provinceAutocomplete.module.css b/src/shared/components/Address/ProvinceAutocomplete/provinceAutocomplete.module.css new file mode 100644 index 0000000..f645a90 --- /dev/null +++ b/src/shared/components/Address/ProvinceAutocomplete/provinceAutocomplete.module.css @@ -0,0 +1,53 @@ +.validateField { + background-image: unset !important; + border-color: unset !important; + border-top: unset !important; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + background-position: unset !important; + background-repeat: unset !important; + background-size: unset !important; + padding-top: 0.375rem !important; + padding-bottom: 0.375rem !important; + padding-right: 0.75rem !important; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000 !important; + padding-left: 8px; +} + +.validField { + border-bottom: 1px solid #d2cfda !important; +} + +.invalidField { + background-color: #fff0f0; + border-bottom: 1px solid #e82828 !important; +} + +.validateField::placeholder { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + /* Placeholder text color */ + color: #b3abc6; + /* opacity: 1; */ + /* Firefox */ +} + +.validateField:focus { + box-shadow: unset !important; + background-color: unset; +} + +.icon { + position: absolute; + right: 0; + top: 40%; +} diff --git a/src/shared/components/Address/index.ts b/src/shared/components/Address/index.ts new file mode 100644 index 0000000..6068e4b --- /dev/null +++ b/src/shared/components/Address/index.ts @@ -0,0 +1,3 @@ +export { CountryAutocomplete } from "./CountryAutocomplete"; +export { ProvinceAutocomplete } from "./ProvinceAutocomplete"; +export { GoogleAutocomplete } from "./GoogleAutocomplete"; diff --git a/src/shared/components/Anchor/Anchor.tsx b/src/shared/components/Anchor/Anchor.tsx new file mode 100644 index 0000000..b0e0bc1 --- /dev/null +++ b/src/shared/components/Anchor/Anchor.tsx @@ -0,0 +1,71 @@ +import React, { memo, KeyboardEvent } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +// import classes from './anchor.module.css'; + +interface Props { + id?: string; + className?: string; + href?: string; + ariaLabel?: string; + role?: string; + tabIndex?: number; + dataId?: number | string; + dataName?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: KeyboardEvent) => void; + onMouseUp?: (e: any) => void; + onMouseDown?: (e: any) => void; + children: any; +} +const Anchor = ({ + id, + className = '', + href = '/', + ariaLabel, + role, + tabIndex, + dataId, + dataName, + children, + onClick, + onKeyUp, + onMouseDown, + onMouseUp, +}: Props) => ( + + {children} + +); + +Anchor.defaultProps = { + id: null, + className: null, + href: null, + role: 'link', + tabIndex: undefined, + ariaLabel: null, + dataId: null, + dataName: null, + onClick: null, + onMouseUp: null, + onMouseDown: null, + onKeyUp: null, +}; + +// This to allows default props +const AnchorMemo = memo(Anchor, areEqual); +export { AnchorMemo as Anchor }; diff --git a/src/shared/components/Anchor/EmailAnchor/EmailAnchor.tsx b/src/shared/components/Anchor/EmailAnchor/EmailAnchor.tsx new file mode 100644 index 0000000..4b17fa2 --- /dev/null +++ b/src/shared/components/Anchor/EmailAnchor/EmailAnchor.tsx @@ -0,0 +1,29 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { Icon } from 'Components/Icons'; + +import classes from './emailAnchor.module.css'; + +interface Props { + address: string; + children: any; + className?: string; +} + +const EmailAnchor = ({ address, children, className }: Props) => ( + + + + + {children} + +); + +EmailAnchor.defaultProps = { + className: undefined, +}; +const EmailAnchorMemo = memo(EmailAnchor, areEqual); +export { EmailAnchorMemo as EmailAnchor }; diff --git a/src/shared/components/Anchor/EmailAnchor/emailAnchor.module.css b/src/shared/components/Anchor/EmailAnchor/emailAnchor.module.css new file mode 100644 index 0000000..874d2f5 --- /dev/null +++ b/src/shared/components/Anchor/EmailAnchor/emailAnchor.module.css @@ -0,0 +1,13 @@ +.emailAnchorBase { + text-decoration: none; + color: #777185; +} + +/* .icon { + transform: scale(0.8); +}*/ + +.text { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/shared/components/Anchor/EmailAnchor/index.ts b/src/shared/components/Anchor/EmailAnchor/index.ts new file mode 100644 index 0000000..6d3acaa --- /dev/null +++ b/src/shared/components/Anchor/EmailAnchor/index.ts @@ -0,0 +1 @@ +export { EmailAnchor } from './EmailAnchor'; diff --git a/src/shared/components/Anchor/NewTabAnchor/NewTabAnchor.tsx b/src/shared/components/Anchor/NewTabAnchor/NewTabAnchor.tsx new file mode 100644 index 0000000..33ed006 --- /dev/null +++ b/src/shared/components/Anchor/NewTabAnchor/NewTabAnchor.tsx @@ -0,0 +1,24 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './newTabAnchor.module.css'; + +interface Props { + href: string; + className?: string; + children: any; +} + +const NewTabAnchor = ({ href, className, children }: Props) => ( + + {children} + +); + +NewTabAnchor.defaultProps = { + className: undefined, +}; + +// This to allows default props +const NewTabAnchorMemo = memo(NewTabAnchor, areEqual); +export { NewTabAnchorMemo as NewTabAnchor }; diff --git a/src/shared/components/Anchor/NewTabAnchor/index.ts b/src/shared/components/Anchor/NewTabAnchor/index.ts new file mode 100644 index 0000000..43665fc --- /dev/null +++ b/src/shared/components/Anchor/NewTabAnchor/index.ts @@ -0,0 +1 @@ +export { NewTabAnchor } from './NewTabAnchor'; diff --git a/src/shared/components/Anchor/NewTabAnchor/newTabAnchor.module.css b/src/shared/components/Anchor/NewTabAnchor/newTabAnchor.module.css new file mode 100644 index 0000000..fc8fc45 --- /dev/null +++ b/src/shared/components/Anchor/NewTabAnchor/newTabAnchor.module.css @@ -0,0 +1,14 @@ +.anchorBase { + text-decoration: none; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + transition: color 150ms ease-in-out; + color: #9A00FF; +} + +.anchorBase:active, .anchorBase:focus { + color: #6D00E6; +} diff --git a/src/shared/components/Anchor/PhoneAnchor/PhoneAnchor.tsx b/src/shared/components/Anchor/PhoneAnchor/PhoneAnchor.tsx new file mode 100644 index 0000000..23fc228 --- /dev/null +++ b/src/shared/components/Anchor/PhoneAnchor/PhoneAnchor.tsx @@ -0,0 +1,30 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { Icon } from 'Components/Icons'; + +import classes from './phone.module.css'; + +interface Props { + phone: string; + children: any; + className?: string; +} + +const PhoneAnchor = ({ phone, children, className }: Props) => ( + + + + + {children} + +); + +PhoneAnchor.defaultProps = { + className: undefined, +}; + +const PhoneAnchorMemo = memo(PhoneAnchor, areEqual); +export { PhoneAnchorMemo as PhoneAnchor }; diff --git a/src/shared/components/Anchor/PhoneAnchor/index.ts b/src/shared/components/Anchor/PhoneAnchor/index.ts new file mode 100644 index 0000000..ac90774 --- /dev/null +++ b/src/shared/components/Anchor/PhoneAnchor/index.ts @@ -0,0 +1 @@ +export { PhoneAnchor } from './PhoneAnchor'; diff --git a/src/shared/components/Anchor/PhoneAnchor/phone.module.css b/src/shared/components/Anchor/PhoneAnchor/phone.module.css new file mode 100644 index 0000000..6ea1094 --- /dev/null +++ b/src/shared/components/Anchor/PhoneAnchor/phone.module.css @@ -0,0 +1,12 @@ +.text { + padding-left: 15px; +} + +.phoneAnchorBase { + text-decoration: none; + color: #777185; +} + +.phoneInfo svg { + transform: scale(0.6); +} diff --git a/src/shared/components/Anchor/anchor.module.css b/src/shared/components/Anchor/anchor.module.css new file mode 100644 index 0000000..c1155f8 --- /dev/null +++ b/src/shared/components/Anchor/anchor.module.css @@ -0,0 +1,6 @@ +.anchor { + color: navy; +} +.anchorVisited { + color: #6a0dce; +} diff --git a/src/shared/components/Anchor/index.ts b/src/shared/components/Anchor/index.ts new file mode 100644 index 0000000..a194899 --- /dev/null +++ b/src/shared/components/Anchor/index.ts @@ -0,0 +1 @@ +export { Anchor } from './Anchor'; diff --git a/src/shared/components/Avatar/Avatar/Avatar.tsx b/src/shared/components/Avatar/Avatar/Avatar.tsx new file mode 100644 index 0000000..f8c3327 --- /dev/null +++ b/src/shared/components/Avatar/Avatar/Avatar.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './avatar.module.css'; + +interface Props { + className?: string; + avatar: string; +} + +const Avatar = ({ className, avatar }: Props) => ( + avatar +); + +Avatar.defaultProps = { + className: '', +}; + +const AvatarMemo = memo(Avatar, areEqual); +export { AvatarMemo as Avatar }; diff --git a/src/shared/components/Avatar/Avatar/avatar.module.css b/src/shared/components/Avatar/Avatar/avatar.module.css new file mode 100644 index 0000000..b5f977e --- /dev/null +++ b/src/shared/components/Avatar/Avatar/avatar.module.css @@ -0,0 +1,5 @@ +.avatarDefault { + width: 40px; + height: 40px; + border-radius: 20px; +} diff --git a/src/shared/components/Avatar/Avatar/index.ts b/src/shared/components/Avatar/Avatar/index.ts new file mode 100644 index 0000000..d3fb6df --- /dev/null +++ b/src/shared/components/Avatar/Avatar/index.ts @@ -0,0 +1 @@ +export { Avatar } from './Avatar'; diff --git a/src/shared/components/Avatar/AvatarOrInitials/AvatarOrInitials.tsx b/src/shared/components/Avatar/AvatarOrInitials/AvatarOrInitials.tsx new file mode 100644 index 0000000..aad1c5d --- /dev/null +++ b/src/shared/components/Avatar/AvatarOrInitials/AvatarOrInitials.tsx @@ -0,0 +1,31 @@ +import React, { memo } from 'react'; + +import { initials } from 'Utils/helpers'; +import { areEqual } from 'Utils/equalityChecks'; + +import { Avatar } from 'Components/Avatar'; + +import classes from './avatarOrInitials.module.css'; + +interface Props { + avatar: string; + firstName: string; + lastName?: string; + avatarClassName?: string; +} + +const AvatarOrInitials = ({ avatar, firstName, lastName, avatarClassName }: Props) => + typeof avatar === 'string' && avatar.length > 0 ? ( + + ) : ( +
    {initials(firstName, lastName)}
    + ); + +AvatarOrInitials.defaultProps = { + avatarClassName: undefined, + lastName: '', +}; + +const AvatarOrInitialsMemo = memo(AvatarOrInitials, areEqual); + +export { AvatarOrInitialsMemo as AvatarOrInitials }; diff --git a/src/shared/components/Avatar/AvatarOrInitials/avatarOrInitials.module.css b/src/shared/components/Avatar/AvatarOrInitials/avatarOrInitials.module.css new file mode 100644 index 0000000..36b524b --- /dev/null +++ b/src/shared/components/Avatar/AvatarOrInitials/avatarOrInitials.module.css @@ -0,0 +1,14 @@ +.initials { + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + font-size: 16px; + line-height: 20px; + color: #5b476b; + height: 40px; + width: 40px; + background-color: #d2cfda; + border: 1px solid #ffffff; + border-radius: 50%; +} diff --git a/src/shared/components/Avatar/AvatarOrInitials/index.ts b/src/shared/components/Avatar/AvatarOrInitials/index.ts new file mode 100644 index 0000000..b76989d --- /dev/null +++ b/src/shared/components/Avatar/AvatarOrInitials/index.ts @@ -0,0 +1 @@ +export { AvatarOrInitials } from './AvatarOrInitials'; diff --git a/src/shared/components/Avatar/index.ts b/src/shared/components/Avatar/index.ts new file mode 100644 index 0000000..c6e954c --- /dev/null +++ b/src/shared/components/Avatar/index.ts @@ -0,0 +1,2 @@ +export { Avatar } from './Avatar'; +export { AvatarOrInitials } from './AvatarOrInitials'; diff --git a/src/shared/components/Button/Button/Button.tsx b/src/shared/components/Button/Button/Button.tsx new file mode 100644 index 0000000..15e1824 --- /dev/null +++ b/src/shared/components/Button/Button/Button.tsx @@ -0,0 +1,78 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +/* + Todo: Use the bs markup and base classes. + THen test with an overload on witdh and see which takes precedence. +*/ +interface Props { + className?: string; + disabled?: boolean; + type?: 'button' | 'submit' | 'reset'; + id?: string; + ariaLabel?: string; + value?: any; + children?: any; + dataId?: number | string; + dataName?: string; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} +const Button = React.forwardRef( + ( + { ariaLabel, type, className, disabled = false, id, value, children, dataId, dataName, onClick, onKeyUp }: Props, + buttonRef: any + ) => + buttonRef ? ( + + ) : ( + + ) +); + +Button.defaultProps = { + className: undefined, + onClick: undefined, + onKeyUp: undefined, + disabled: undefined, + id: undefined, + value: undefined, + dataId: null, + dataName: null, + type: 'button', + ariaLabel: undefined, + children: undefined, +}; +// This to allows default props +const ButtonMemo = memo(Button, areEqualShallow); + +// Export it with the correct name +export { ButtonMemo as Button }; diff --git a/src/shared/components/Button/Button/index.ts b/src/shared/components/Button/Button/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/src/shared/components/Button/Button/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/src/shared/components/Button/CancelButton/CancelButton.tsx b/src/shared/components/Button/CancelButton/CancelButton.tsx new file mode 100644 index 0000000..085273d --- /dev/null +++ b/src/shared/components/Button/CancelButton/CancelButton.tsx @@ -0,0 +1,26 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import { Button } from '../Button'; +import classes from './cancelButton.module.css'; + +interface Props { + className?: string; + children: any; + onClick: (e: any) => void; +} + +const CancelButton = ({ className, children, onClick }: Props) => ( + +); + +CancelButton.defaultProps = { + className: undefined, +}; + +const CancelButtonMemo = memo(CancelButton, areEqualShallow); + +export { CancelButtonMemo as CancelButton }; diff --git a/src/shared/components/Button/CancelButton/cancelButton.module.css b/src/shared/components/Button/CancelButton/cancelButton.module.css new file mode 100644 index 0000000..c2ae64d --- /dev/null +++ b/src/shared/components/Button/CancelButton/cancelButton.module.css @@ -0,0 +1,14 @@ +.btnBase { + display: flex; + /* flex-direction: row; */ + justify-content: center; + align-items: center; + width: 100%; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + border-color: #5b476b !important; + color: #5b476b !important; +} diff --git a/src/shared/components/Button/CancelButton/index.ts b/src/shared/components/Button/CancelButton/index.ts new file mode 100644 index 0000000..43def47 --- /dev/null +++ b/src/shared/components/Button/CancelButton/index.ts @@ -0,0 +1 @@ +export { CancelButton } from './CancelButton'; diff --git a/src/shared/components/Button/CategoryButton/CategoryButton.tsx b/src/shared/components/Button/CategoryButton/CategoryButton.tsx new file mode 100644 index 0000000..144455c --- /dev/null +++ b/src/shared/components/Button/CategoryButton/CategoryButton.tsx @@ -0,0 +1,43 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Icon } from 'Components/Icons'; +import { Button } from '../Button'; +import classes from './categoryButton.module.css'; + +interface Props { + className?: string; + selectedCount?: number; + isOpen?: boolean; + onClick?: (e: any) => void; +} + +const CategoryButton = ({ className, isOpen, selectedCount = 0, onClick }: Props) => ( + +); + +CategoryButton.defaultProps = { + className: undefined, + selectedCount: undefined, + isOpen: undefined, + onClick: undefined, +}; + +const CategoryButtonMemo = memo(CategoryButton, areEqualShallow); + +export { CategoryButtonMemo as CategoryButton }; diff --git a/src/shared/components/Button/CategoryButton/categoryButton.module.css b/src/shared/components/Button/CategoryButton/categoryButton.module.css new file mode 100644 index 0000000..1086cbe --- /dev/null +++ b/src/shared/components/Button/CategoryButton/categoryButton.module.css @@ -0,0 +1,59 @@ +.categoryButtonBase { + width: auto; + min-width: 160px; + height: 32px; + padding: 0 8px !important; + background: #e8e7ed; + border: 1px solid #e8e7ed; + border-radius: 32px; + display: flex; + align-items: center; + justify-content: space-between; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #5b476b; +} +.categoryButtonBase:focus { + box-shadow: none; +} + +.categoryButtonBase svg { + cursor: unset; +} + +.counter { + width: 24px; + height: 24px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #ffffff; + background: #9a00ff; + border-radius: 50%; + margin-left: 10px; + margin-right: 10px; +} +.hasCategories, +.showCategories { + color: #ffffff !important; + background-color: #5b476b; +} +.hasCategories svg path, +.showCategories svg path { + fill: #ffffff; +} +.hasCategories:hover { + color: #ffffff; +} +.caretIcon { + transition: transform 0.2s; +} +.rotateIcon { + transform: rotate(-180deg); + transition: transform 0.2s; +} diff --git a/src/shared/components/Button/CategoryButton/index.ts b/src/shared/components/Button/CategoryButton/index.ts new file mode 100644 index 0000000..4832756 --- /dev/null +++ b/src/shared/components/Button/CategoryButton/index.ts @@ -0,0 +1 @@ +export { CategoryButton } from './CategoryButton'; diff --git a/src/shared/components/Button/ClearButton/ClearButton.tsx b/src/shared/components/Button/ClearButton/ClearButton.tsx new file mode 100644 index 0000000..f504d1a --- /dev/null +++ b/src/shared/components/Button/ClearButton/ClearButton.tsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Icon } from 'Components/Icons'; +import { Button } from '../Button'; +import classes from './clearButton.module.css'; + +interface Props { + className?: string; + onClick: (e: any) => void; +} + +const ClearButton = ({ className, onClick }: Props) => ( + +); + +ClearButton.defaultProps = { + className: undefined, +}; + +const ClearButtonMemo = memo(ClearButton, areEqualShallow); + +export { ClearButtonMemo as ClearButton }; diff --git a/src/shared/components/Button/ClearButton/clearButton.module.css b/src/shared/components/Button/ClearButton/clearButton.module.css new file mode 100644 index 0000000..693985e --- /dev/null +++ b/src/shared/components/Button/ClearButton/clearButton.module.css @@ -0,0 +1,22 @@ +.btnBase { + width: 86px; + height: 32px; + padding: 8px !important; + background: #FFFFFF; + border: 1px solid #D2CFDA; + box-shadow: 0 6px 12px rgba(142, 134, 163, 0.2); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: space-between; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + color: #000000; +} + +.btnBase svg { + cursor: unset; +} diff --git a/src/shared/components/Button/ClearButton/index.ts b/src/shared/components/Button/ClearButton/index.ts new file mode 100644 index 0000000..f8bef72 --- /dev/null +++ b/src/shared/components/Button/ClearButton/index.ts @@ -0,0 +1 @@ +export { ClearButton } from './ClearButton'; diff --git a/src/shared/components/Button/CloseButton/CloseButton.tsx b/src/shared/components/Button/CloseButton/CloseButton.tsx new file mode 100644 index 0000000..e675d6c --- /dev/null +++ b/src/shared/components/Button/CloseButton/CloseButton.tsx @@ -0,0 +1,28 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import { Button } from "../Button"; +import { Icon } from "Components/Icons"; +import classes from "./closeButton.module.css" + +interface Props { + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +// This button is based on the BS close button and is used to close anything that needs closing. +const CloseButton = ({ onClick, onKeyUp }: Props) => ( + +); + +CloseButton.defaultProps = { + onClick: undefined, + onKeyUp: undefined, +}; +// This to allows default props +const CloseButtonMemo = memo(CloseButton, areEqualShallow); + +// Export it with the correct name +export { CloseButtonMemo as CloseButton }; diff --git a/src/shared/components/Button/CloseButton/closeButton.module.css b/src/shared/components/Button/CloseButton/closeButton.module.css new file mode 100644 index 0000000..901394d --- /dev/null +++ b/src/shared/components/Button/CloseButton/closeButton.module.css @@ -0,0 +1,20 @@ +.btnBase { + color: #fff; + background: linear-gradient(135deg, #9601FF 0%, #6D00E6 100%); + transition: color 300ms ease-out, background 300ms ease-out; + width: 56px; + height: 56px; + padding: 0rem !important; +} + +.closeButton { + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; +} + +.closeButtonIcon { + transform-origin: center; + transform: rotate(45deg) scale(2); +} \ No newline at end of file diff --git a/src/shared/components/Button/CloseButton/index.ts b/src/shared/components/Button/CloseButton/index.ts new file mode 100644 index 0000000..f8dff69 --- /dev/null +++ b/src/shared/components/Button/CloseButton/index.ts @@ -0,0 +1 @@ +export { CloseButton } from "./CloseButton"; diff --git a/src/shared/components/Button/DarkPurpleButton/DarkPurpleButton.tsx b/src/shared/components/Button/DarkPurpleButton/DarkPurpleButton.tsx new file mode 100644 index 0000000..184c888 --- /dev/null +++ b/src/shared/components/Button/DarkPurpleButton/DarkPurpleButton.tsx @@ -0,0 +1,53 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Button } from '../Button'; + +import classes from './darkPurpleButton.module.css'; + +interface Props { + className?: string; + disabled?: boolean; + type?: 'button' | 'submit' | 'reset'; + outlined?: boolean; + id?: string; + children: any; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} + +const DarkPurpleButton = ({ + className, + type, + disabled = false, + outlined = false, + id, + children, + onClick, + onKeyUp, +}: Props) => ( + +); + +DarkPurpleButton.defaultProps = { + className: undefined, + onClick: null, + onKeyUp: null, + disabled: false, + outlined: false, + id: null, + type: 'button', +}; +// This to allows default props +const DarkPurpleButtonMemo = memo(DarkPurpleButton, areEqualShallow); + +// Export it with the correct name +export { DarkPurpleButtonMemo as DarkPurpleButton }; diff --git a/src/shared/components/Button/DarkPurpleButton/darkPurpleButton.module.css b/src/shared/components/Button/DarkPurpleButton/darkPurpleButton.module.css new file mode 100644 index 0000000..ae4068f --- /dev/null +++ b/src/shared/components/Button/DarkPurpleButton/darkPurpleButton.module.css @@ -0,0 +1,17 @@ +.btnBase { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px 49px; + color: #5b476b; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + background: #ffffff; + border: 1px solid #5b476b; + box-sizing: border-box; + border-radius: 5px; +} diff --git a/src/shared/components/Button/DarkPurpleButton/index.ts b/src/shared/components/Button/DarkPurpleButton/index.ts new file mode 100644 index 0000000..e956ab4 --- /dev/null +++ b/src/shared/components/Button/DarkPurpleButton/index.ts @@ -0,0 +1 @@ +export { DarkPurpleButton } from './DarkPurpleButton'; diff --git a/src/shared/components/Button/DeleteButton/DeleteButton.tsx b/src/shared/components/Button/DeleteButton/DeleteButton.tsx new file mode 100644 index 0000000..7ab7a00 --- /dev/null +++ b/src/shared/components/Button/DeleteButton/DeleteButton.tsx @@ -0,0 +1,41 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Button } from '../Button'; + +import classes from './deleteButton.module.css'; + +interface Props { + className?: string; + disabled?: boolean; + id?: string; + children: any; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} + +const DeleteButton = ({ className, disabled = false, id, children, onClick, onKeyUp }: Props) => ( + +); + +// This to allows default props +DeleteButton.defaultProps = { + className: undefined, + onClick: null, + onKeyUp: null, + disabled: false, + id: null, +}; + +const DeleteButtonMemo = memo(DeleteButton, areEqualShallow); + +// Export it with the correct name +export { DeleteButtonMemo as DeleteButton }; diff --git a/src/shared/components/Button/DeleteButton/deleteButton.module.css b/src/shared/components/Button/DeleteButton/deleteButton.module.css new file mode 100644 index 0000000..70ce4e9 --- /dev/null +++ b/src/shared/components/Button/DeleteButton/deleteButton.module.css @@ -0,0 +1,14 @@ +.btnBase { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + border-color: #e82828 !important; + color: #e82828 !important; +} diff --git a/src/shared/components/Button/DeleteButton/index.ts b/src/shared/components/Button/DeleteButton/index.ts new file mode 100644 index 0000000..45cf4a7 --- /dev/null +++ b/src/shared/components/Button/DeleteButton/index.ts @@ -0,0 +1 @@ +export { DeleteButton } from './DeleteButton'; diff --git a/src/shared/components/Button/EditButton/EditButton.tsx b/src/shared/components/Button/EditButton/EditButton.tsx new file mode 100644 index 0000000..e17c1aa --- /dev/null +++ b/src/shared/components/Button/EditButton/EditButton.tsx @@ -0,0 +1,23 @@ +import React, { memo } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +import { PurpleButton } from '../PurpleButton'; + +import classes from './editButton.module.css'; + +interface Props { + editable: boolean; + onClick: (e: any) => void; +} + +const EditButton = ({ editable, onClick }: Props) => ( +
    + + {editable ? 'Done' : 'Edit'} + +
    +); + +const EditButtonMemo = memo(EditButton, areEqualShallow); + +// Export it with the correct name +export { EditButtonMemo as EditButton }; diff --git a/src/shared/components/Button/EditButton/editButton.module.css b/src/shared/components/Button/EditButton/editButton.module.css new file mode 100644 index 0000000..a2d753e --- /dev/null +++ b/src/shared/components/Button/EditButton/editButton.module.css @@ -0,0 +1,8 @@ +.button { + width: 148px; + height: 32px; +} + +.button:focus { + box-shadow: unset; +} diff --git a/src/shared/components/Button/EditButton/index.ts b/src/shared/components/Button/EditButton/index.ts new file mode 100644 index 0000000..1422c38 --- /dev/null +++ b/src/shared/components/Button/EditButton/index.ts @@ -0,0 +1 @@ +export { EditButton } from './EditButton'; diff --git a/src/shared/components/Button/LoadMoreButton/LoadMoreButton.tsx b/src/shared/components/Button/LoadMoreButton/LoadMoreButton.tsx new file mode 100644 index 0000000..abbc0dd --- /dev/null +++ b/src/shared/components/Button/LoadMoreButton/LoadMoreButton.tsx @@ -0,0 +1,29 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Button } from 'Components/Button'; +import { Icon } from 'Components/Icons'; + +import classes from './loadMoreButton.module.css'; + +interface Props { + type: string; + totalItems?: number; + loadMoreItemsClick?: (e: any) => void; +} + +const LoadMoreButton = ({ type, totalItems, loadMoreItemsClick }: Props) => ( + +); + +LoadMoreButton.defaultProps = { + totalItems: undefined, + loadMoreItemsClick: undefined, +}; +const LoadMoreButtonMemo = memo(LoadMoreButton, areEqual); + +export { LoadMoreButtonMemo as LoadMoreButton }; diff --git a/src/shared/components/Button/LoadMoreButton/index.ts b/src/shared/components/Button/LoadMoreButton/index.ts new file mode 100644 index 0000000..f53f937 --- /dev/null +++ b/src/shared/components/Button/LoadMoreButton/index.ts @@ -0,0 +1 @@ +export { LoadMoreButton } from './LoadMoreButton'; diff --git a/src/shared/components/Button/LoadMoreButton/loadMoreButton.module.css b/src/shared/components/Button/LoadMoreButton/loadMoreButton.module.css new file mode 100644 index 0000000..0ef5303 --- /dev/null +++ b/src/shared/components/Button/LoadMoreButton/loadMoreButton.module.css @@ -0,0 +1,27 @@ +.loadMoreButton { + margin-top: 24px; + min-height: 33px; + display: grid; + grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); + align-items: center; + text-align: center; + grid-gap: 20px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #777185; + width: 100%; +} +.loadMoreButton:focus { + box-shadow: none; +} +.loadMoreButton:before, +.loadMoreButton:after { + content: ''; + border-top: 1px solid #d2cfda; +} +.loadMoreButton svg { + margin-left: 14px; +} diff --git a/src/shared/components/Button/OutlineButton/OutlineButton.tsx b/src/shared/components/Button/OutlineButton/OutlineButton.tsx new file mode 100644 index 0000000..164d897 --- /dev/null +++ b/src/shared/components/Button/OutlineButton/OutlineButton.tsx @@ -0,0 +1,26 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import { Button } from '../Button'; +import classes from './outlineButton.module.css'; + +interface Props { + className?: string; + children: any; + onClick: (e: any) => void; +} + +const OutlineButton = ({ className, children, onClick }: Props) => ( + +); + +OutlineButton.defaultProps = { + className: undefined, +}; + +const OutlineButtonMemo = memo(OutlineButton, areEqualShallow); + +export { OutlineButtonMemo as OutlineButton }; diff --git a/src/shared/components/Button/OutlineButton/index.ts b/src/shared/components/Button/OutlineButton/index.ts new file mode 100644 index 0000000..59ee957 --- /dev/null +++ b/src/shared/components/Button/OutlineButton/index.ts @@ -0,0 +1 @@ +export { OutlineButton } from './OutlineButton'; diff --git a/src/shared/components/Button/OutlineButton/outlineButton.module.css b/src/shared/components/Button/OutlineButton/outlineButton.module.css new file mode 100644 index 0000000..c2ae64d --- /dev/null +++ b/src/shared/components/Button/OutlineButton/outlineButton.module.css @@ -0,0 +1,14 @@ +.btnBase { + display: flex; + /* flex-direction: row; */ + justify-content: center; + align-items: center; + width: 100%; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + border-color: #5b476b !important; + color: #5b476b !important; +} diff --git a/src/shared/components/Button/ProjectScreenButton/ProjectScreenButton.tsx b/src/shared/components/Button/ProjectScreenButton/ProjectScreenButton.tsx new file mode 100644 index 0000000..3454860 --- /dev/null +++ b/src/shared/components/Button/ProjectScreenButton/ProjectScreenButton.tsx @@ -0,0 +1,76 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; + +import { Icon } from 'Components/Icons'; +import { Modal } from 'Components/Modal'; +import { Anchor } from 'Components/Anchor'; +import { Button } from '../Button'; + +import classes from './projectScreenButton.module.css'; + +interface Props { + type?: 'button'; + id?: string; + isModalOpen: boolean; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; + setModalStatus: () => void; +} + +const ProjectScreenButton = ({ type, id, isModalOpen, onClick, onKeyUp, setModalStatus }: Props) => ( + <> + +
      +
    • + + Add a Contact + + +
      • +
    • + {/* + Create Project + + */} +
      • +
    +     + + {!isModalOpen && ( + + )} + +); + +ProjectScreenButton.defaultProps = { + onClick: undefined, + onKeyUp: undefined, + id: undefined, + type: 'button', +}; + +const ProjectScreenButtonMemo = memo(ProjectScreenButton, areEqualShallow); +export { ProjectScreenButtonMemo as ProjectScreenButton }; diff --git a/src/shared/components/Button/ProjectScreenButton/index.ts b/src/shared/components/Button/ProjectScreenButton/index.ts new file mode 100644 index 0000000..ef45624 --- /dev/null +++ b/src/shared/components/Button/ProjectScreenButton/index.ts @@ -0,0 +1 @@ +export { ProjectScreenButton } from './ProjectScreenButton'; \ No newline at end of file diff --git a/src/shared/components/Button/ProjectScreenButton/projectScreenButton.module.css b/src/shared/components/Button/ProjectScreenButton/projectScreenButton.module.css new file mode 100644 index 0000000..61d741c --- /dev/null +++ b/src/shared/components/Button/ProjectScreenButton/projectScreenButton.module.css @@ -0,0 +1,112 @@ +/* Plus Button */ + +.btnBase { + display: flex; + justify-content: center; + align-items: center; + color: #fff; + background: linear-gradient(135deg, #9601ff 0%, #6d00e6 100%); + transition: color 300ms ease-out, background 300ms ease-out; + width: 56px; + height: 56px; + padding: 0rem !important; +} + +.btnBase:hover, +.btnBase:active { + color: #fff !important; + background: linear-gradient(135deg, #6d00e6 0%, #6d00e6 100%); +} + +.btnIcon { + transform-origin: center; + transform: scale(2); +} + +.plusButton { + display: flex; + align-items: center; + justify-content: center; +} + +.outlined { + color: #9a00ff; + background: linear-gradient(0, transparent 0%, transparent 100%); +} + +.btn-important { + border-radius: 3px !important; +} + +/* Modal */ + +.modalOverride { + background-color: rgba(255, 255, 255, 0.75); +} + +.modalDialogOverride { + background-color: unset !important; + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + flex-direction: column-reverse; + margin: 0rem !important; +} + +.modalContentOverride { + background-color: unset !important; + border: unset !important; +} + +.modalLinkOverride { + border: none !important; + background-color: unset !important; + padding-top: 24px; +} + +.linkText { + text-decoration: none !important; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 23px; + text-align: right; + color: #000000 !important; +} + +.iconContainer { + background-color: #f4e5ff; + margin-left: 24px; + border: 0.5px solid #d2cfda; + box-shadow: 0px 3px 8px rgba(142, 134, 163, 0.25); + height: 40px; + width: 40px; + text-align: center; + padding: 0rem !important; +} + +.listIcon { + transform-origin: center; + transform: scale(0.8); +} + +.closeButtonContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 32px; +} + +.closeButton { + display: flex; + align-items: center; + justify-content: center; + margin-right: -8px; +} + +.closeButtonIcon { + transform-origin: center; + transform: rotate(45deg) scale(2); +} diff --git a/src/shared/components/Button/PurpleButton/PurpleButton.tsx b/src/shared/components/Button/PurpleButton/PurpleButton.tsx new file mode 100644 index 0000000..6e78752 --- /dev/null +++ b/src/shared/components/Button/PurpleButton/PurpleButton.tsx @@ -0,0 +1,53 @@ +import React, { KeyboardEvent, memo, MouseEvent } from "react"; +import { areEqualShallow } from "Utils/equalityChecks"; +import { Button } from "../Button"; + +import classes from "./purpleButton.module.css"; + +interface Props { + className?: string; + disabled?: boolean; + type?: "button" | "submit" | "reset"; + outlined?: boolean; + id?: string; + children: any; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} + +const PurpleButton = ({ + className, + type, + disabled = false, + outlined = false, + id, + children, + onClick, + onKeyUp, +}: Props) => ( + +); + +PurpleButton.defaultProps = { + className: undefined, + onClick: null, + onKeyUp: null, + disabled: false, + outlined: false, + id: null, + type: "button", +}; +// This to allows default props +const PurpleButtonMemo = memo(PurpleButton, areEqualShallow); + +// Export it with the correct name +export { PurpleButtonMemo as PurpleButton }; diff --git a/src/shared/components/Button/PurpleButton/index.ts b/src/shared/components/Button/PurpleButton/index.ts new file mode 100644 index 0000000..492c011 --- /dev/null +++ b/src/shared/components/Button/PurpleButton/index.ts @@ -0,0 +1 @@ +export { PurpleButton } from './PurpleButton'; diff --git a/src/shared/components/Button/PurpleButton/purpleButton.module.css b/src/shared/components/Button/PurpleButton/purpleButton.module.css new file mode 100644 index 0000000..e392972 --- /dev/null +++ b/src/shared/components/Button/PurpleButton/purpleButton.module.css @@ -0,0 +1,31 @@ +.btnBase { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + padding: 10px 49px; + color: #fff; + border-radius: 5px; + border-color: #9A00FF; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + background: -webkit-linear-gradient(135deg, #9601FF 0%, #6D00E6 100%); + background: -moz-linear-gradient(135deg, #9601FF 0%, #6D00E6 100%); + background: -o-linear-gradient(135deg, #9601FF 0%, #6D00E6 100%); + background: linear-gradient(135deg, #9601FF 0%, #6D00E6 100%); + transition: color 300ms ease-out,background 300ms ease-out; +} + +.btnBase:hover, .btnBase:active { + color: #fff; + background: linear-gradient(135deg, #6D00E6 0%, #6D00E6 100%); +} + +.outlined { + color: #9A00FF; + background: linear-gradient(0, transparent 0%, transparent 100%); +} diff --git a/src/shared/components/Button/RadioButton/RadioButton.tsx b/src/shared/components/Button/RadioButton/RadioButton.tsx new file mode 100644 index 0000000..00087a5 --- /dev/null +++ b/src/shared/components/Button/RadioButton/RadioButton.tsx @@ -0,0 +1,48 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Icon } from 'Components/Icons'; +import { Button } from '../Button'; + +import classes from './radioButton.module.css'; + +interface Props { + className?: string; + selected?: boolean; + disabled?: boolean; + id?: string; + value?: string; + children: any; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} + +const RadioButton = ({ className, selected, disabled, value, id, children, onClick, onKeyUp }: Props) => ( + +); + +RadioButton.defaultProps = { + value: undefined, + className: undefined, + onClick: null, + onKeyUp: null, + selected: false, + disabled: false, + id: null, +}; + +// This to allows default props +const RadioButtonMemo = memo(RadioButton, areEqualShallow); + +// Export it with the correct name +export { RadioButtonMemo as RadioButton }; diff --git a/src/shared/components/Button/RadioButton/index.ts b/src/shared/components/Button/RadioButton/index.ts new file mode 100644 index 0000000..f268c5f --- /dev/null +++ b/src/shared/components/Button/RadioButton/index.ts @@ -0,0 +1 @@ +export { RadioButton } from './RadioButton'; diff --git a/src/shared/components/Button/RadioButton/radioButton.module.css b/src/shared/components/Button/RadioButton/radioButton.module.css new file mode 100644 index 0000000..d1497c0 --- /dev/null +++ b/src/shared/components/Button/RadioButton/radioButton.module.css @@ -0,0 +1,26 @@ +.btnBase { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + color: #000000; + background: linear-gradient(0, transparent 0%, transparent 100%); + border-radius: 8px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; +} + +.btnBase:focus { + box-shadow: unset!important; +} + +.outlined { + border-color: #9A00FF; +} + +.btnBase svg { + margin-right: 16px; +} diff --git a/src/shared/components/Button/RoomButton/RoomButton.tsx b/src/shared/components/Button/RoomButton/RoomButton.tsx new file mode 100644 index 0000000..e5e4b42 --- /dev/null +++ b/src/shared/components/Button/RoomButton/RoomButton.tsx @@ -0,0 +1,47 @@ +import React, { KeyboardEvent, memo, MouseEvent } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; +import { Button } from '../Button'; + +import classes from './roomButton.module.css'; + +interface Props { + className?: string; + disabled?: boolean; + type?: 'button' | 'submit' | 'reset'; + isActive?: boolean; + id?: string; + children: any; + onClick?: (e: MouseEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} + +const RoomButton = React.forwardRef( + ({ className, type, disabled = false, isActive, id, children, onClick, onKeyUp }: Props, buttonsRef: any) => ( + + ) +); + +RoomButton.defaultProps = { + className: undefined, + onClick: null, + onKeyUp: null, + disabled: false, + isActive: false, + id: null, + type: 'button', +}; +// This to allows default props +const RoomButtonMemo = memo(RoomButton, areEqualShallow); + +// Export it with the correct name +export { RoomButtonMemo as RoomButton }; diff --git a/src/shared/components/Button/RoomButton/index.ts b/src/shared/components/Button/RoomButton/index.ts new file mode 100644 index 0000000..90e08b6 --- /dev/null +++ b/src/shared/components/Button/RoomButton/index.ts @@ -0,0 +1 @@ +export { RoomButton } from "./RoomButton"; diff --git a/src/shared/components/Button/RoomButton/roomButton.module.css b/src/shared/components/Button/RoomButton/roomButton.module.css new file mode 100644 index 0000000..d4079c1 --- /dev/null +++ b/src/shared/components/Button/RoomButton/roomButton.module.css @@ -0,0 +1,25 @@ +.roomBtnBase { + display: flex; + align-items: center; + width: 100%; + padding: 10px 49px; + color: #000000; + border-radius: 5px; + border: 1px solid #d2cfda; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + background-color: #ffffff; + overflow: hidden; + white-space: nowrap; +} + +.roomBtnBase:hover, +.roomBtnBase:active, +.isActive { + border: 1px solid #9a00ff; + box-shadow: 0px 3px 6px rgba(142, 134, 163, 0.1); + transition: 0.3s ease-in-out; +} diff --git a/src/shared/components/Button/TileButton/TileButton.tsx b/src/shared/components/Button/TileButton/TileButton.tsx new file mode 100644 index 0000000..77ec51b --- /dev/null +++ b/src/shared/components/Button/TileButton/TileButton.tsx @@ -0,0 +1,40 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Button } from '..'; + +import classes from './tileButton.module.css'; + +interface Props { + caption?: string; + icon?: ReactNode; + sizeSmall?: boolean; + className?: string; + disabled?: boolean; + onTileClick?: (e: any) => void; +} + +const TileButtonContainer = ({ caption, icon, sizeSmall, className, disabled = false, onTileClick }: Props) => ( + +); + +TileButtonContainer.defaultProps = { + caption: undefined, + icon: undefined, + sizeSmall: false, + className: undefined, + onTileClick: undefined, + disabled: false, +}; + +const TileButtonContainerMemo = memo(TileButtonContainer, areEqual); + +export { TileButtonContainerMemo as TileButton }; diff --git a/src/shared/components/Button/TileButton/index.ts b/src/shared/components/Button/TileButton/index.ts new file mode 100644 index 0000000..11e9a71 --- /dev/null +++ b/src/shared/components/Button/TileButton/index.ts @@ -0,0 +1 @@ +export { TileButton } from './TileButton'; diff --git a/src/shared/components/Button/TileButton/tileButton.module.css b/src/shared/components/Button/TileButton/tileButton.module.css new file mode 100644 index 0000000..e948b33 --- /dev/null +++ b/src/shared/components/Button/TileButton/tileButton.module.css @@ -0,0 +1,36 @@ +.imageTileCard { + height: 199px; + width: 199px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #d2cfda; + border-radius: 10px; + margin: 0.75em 0.75em; + background-color: unset !important; +} +.imageTileCard:hover { + box-shadow: 0px 6px 12px rgba(142, 134, 163, 0.2); + border-color: rgba(154, 0, 255, 0.5); + transition: ease-in-out 0.2s; +} +.imageCaption { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 31px; + text-align: center; +} +.sizeSmall { + width: 156px; + height: 156px; + padding-top: 36px; + margin: 0; + justify-content: flex-start; +} +.sizeSmall .imageCaption { + font-size: 16px; + line-height: 24px; +} diff --git a/src/shared/components/Button/index.ts b/src/shared/components/Button/index.ts new file mode 100644 index 0000000..c6193d5 --- /dev/null +++ b/src/shared/components/Button/index.ts @@ -0,0 +1,12 @@ +export { Button } from './Button'; +export { CancelButton } from './CancelButton'; +export { CategoryButton } from './CategoryButton'; +export { ClearButton } from './ClearButton'; +export { DarkPurpleButton } from './DarkPurpleButton'; +export { DeleteButton } from './DeleteButton'; +export { OutlineButton } from './OutlineButton'; +export { ProjectScreenButton } from './ProjectScreenButton'; +export { PurpleButton } from './PurpleButton'; +export { TileButton } from './TileButton'; +export { RadioButton } from './RadioButton'; +export { LoadMoreButton } from './LoadMoreButton'; diff --git a/src/shared/components/CheckBox/CheckBox.tsx b/src/shared/components/CheckBox/CheckBox.tsx new file mode 100644 index 0000000..2850d6c --- /dev/null +++ b/src/shared/components/CheckBox/CheckBox.tsx @@ -0,0 +1,42 @@ +import React, { ChangeEvent, KeyboardEvent, memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +/* + Todo: Use the bs markup and base classes. + THen test with an overload on witdh and see which takes precedence. +*/ +interface Props { + id?: string; + checked: boolean; + className: string; + name?: string; + autoComplete?: string; + disabled?: boolean; + onChange: (e: ChangeEvent) => void; + onKeyUp?: (e: KeyboardEvent) => void; +} +const CheckBox = ({ id, checked, className, name, autoComplete = 'off', disabled, onChange, onKeyUp }: Props) => ( + +); + +CheckBox.defaultProps = { + id: undefined, + onKeyUp: undefined, + name: undefined, + disabled: false, + autoComplete: undefined, +}; + +const CheckBoxMemo = memo(CheckBox, areEqual); +export { CheckBoxMemo as CheckBox }; diff --git a/src/shared/components/CheckBox/index.ts b/src/shared/components/CheckBox/index.ts new file mode 100644 index 0000000..0a1de62 --- /dev/null +++ b/src/shared/components/CheckBox/index.ts @@ -0,0 +1 @@ +export { CheckBox } from './CheckBox'; diff --git a/src/shared/components/CompanyHeader/CompanyHeader.tsx b/src/shared/components/CompanyHeader/CompanyHeader.tsx new file mode 100644 index 0000000..b2066b5 --- /dev/null +++ b/src/shared/components/CompanyHeader/CompanyHeader.tsx @@ -0,0 +1,17 @@ +import { Icon } from 'Components/Icons'; +import React, { memo } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; + +interface Props { + iconClassName: string; + iconType?: string; +} +const CompanyHeader = ({ iconClassName, iconType }: Props) => ; + +CompanyHeader.defaultProps = { + iconType: 'logo', +}; + +const CompanyHeaderMemo = memo(CompanyHeader, areEqualShallow); + +export { CompanyHeaderMemo as CompanyHeader }; diff --git a/src/shared/components/CompanyHeader/index.ts b/src/shared/components/CompanyHeader/index.ts new file mode 100644 index 0000000..2c1357c --- /dev/null +++ b/src/shared/components/CompanyHeader/index.ts @@ -0,0 +1 @@ +export { CompanyHeader } from './CompanyHeader'; diff --git a/src/shared/components/Crew/Crew/Crew.tsx b/src/shared/components/Crew/Crew/Crew.tsx new file mode 100644 index 0000000..9c069b5 --- /dev/null +++ b/src/shared/components/Crew/Crew/Crew.tsx @@ -0,0 +1,44 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { PurpleButton } from 'Components/Button'; +import { ProjectDataHeader } from 'Containers/ProjectData'; + +import classes from './crew.module.css'; + +interface Props { + children?: ReactNode; + hasCrew: boolean; + currentUserName: any; + currentUserAvatar: any; + onClickAddCrew: (e: any) => void; +} + +const Crew = ({ children, hasCrew, currentUserName, currentUserAvatar, onClickAddCrew }: Props) => ( +
    +
    + + {hasCrew && ( + + Add Crew + + )} +
    + +
    + {currentUserAvatar} +
    +
    {currentUserName}
    + (You) +
    +
    +
    {children}
    +
    +); +Crew.defaultProps = { + children: undefined, +}; + +const CrewMemo = memo(Crew, areEqual); + +export { CrewMemo as Crew }; diff --git a/src/shared/components/Crew/Crew/crew.module.css b/src/shared/components/Crew/Crew/crew.module.css new file mode 100644 index 0000000..7575aa6 --- /dev/null +++ b/src/shared/components/Crew/Crew/crew.module.css @@ -0,0 +1,38 @@ +.crewContent { + width: 100%; + padding: 0 0 24px; + position: relative; +} +.contentHeader h2 { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 32px; + line-height: 19px; + color: #000000; + margin: 0; +} +.addCrewButton { + background: #ffffff; + color: #9a00ff; + font-weight: 500; + width: 244px; + border-radius: 5px; + margin-left: 20px; +} +.addCrewButton:focus { + box-shadow: none; +} +.userNameArea { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 24px; + color: #777185; + margin-left: 10px; +} +.currentUser { + align-self: flex-start; + padding: 30px; +} diff --git a/src/shared/components/Crew/Crew/index.ts b/src/shared/components/Crew/Crew/index.ts new file mode 100644 index 0000000..361b5d7 --- /dev/null +++ b/src/shared/components/Crew/Crew/index.ts @@ -0,0 +1 @@ +export { Crew } from './Crew'; diff --git a/src/shared/components/Crew/CrewPlaceholder/CrewPlaceholder.tsx b/src/shared/components/Crew/CrewPlaceholder/CrewPlaceholder.tsx new file mode 100644 index 0000000..d97d1ca --- /dev/null +++ b/src/shared/components/Crew/CrewPlaceholder/CrewPlaceholder.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; +import { Icon } from 'Components/Icons'; + +import { PurpleButton } from 'Components/Button'; +import { areEqual } from 'Utils/equalityChecks'; +import classes from './crewPlaceholder.module.css'; + +interface Props { + onClickAddCrew: () => void; +} + +const CrewPlaceholder = ({ onClickAddCrew }: Props) => ( +
    +
    + +
    You haven’t added any team members yet
    +
    Click the ‘Add Crew Member’ button to create your best team!
    + + Add Crew + +
    +
    +); + +const CrewPlaceholderMemo = memo(CrewPlaceholder, areEqual); + +export { CrewPlaceholderMemo as CrewPlaceholder }; diff --git a/src/shared/components/Crew/CrewPlaceholder/crewPlaceholder.module.css b/src/shared/components/Crew/CrewPlaceholder/crewPlaceholder.module.css new file mode 100644 index 0000000..66059ad --- /dev/null +++ b/src/shared/components/Crew/CrewPlaceholder/crewPlaceholder.module.css @@ -0,0 +1,44 @@ +.content { + max-width: 310px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.content > svg { + transform: scale(0.7); +} +.heading { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #777185; + margin-bottom: 10px; +} +.copy { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #777185; + width: 280px; +} +.content button, +.content button:hover, +.content button:focus { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + width: 244px; + margin-top: 16px; + background: linear-gradient(135deg, #9601ff 0%, #6d00e6 100%); + color: #ffffff; + box-shadow: none; +} diff --git a/src/shared/components/Crew/CrewPlaceholder/index.ts b/src/shared/components/Crew/CrewPlaceholder/index.ts new file mode 100644 index 0000000..94ed90d --- /dev/null +++ b/src/shared/components/Crew/CrewPlaceholder/index.ts @@ -0,0 +1 @@ +export { CrewPlaceholder } from './CrewPlaceholder'; diff --git a/src/shared/components/Crew/CrewWrapper/CrewWrapper.tsx b/src/shared/components/Crew/CrewWrapper/CrewWrapper.tsx new file mode 100644 index 0000000..a690e7f --- /dev/null +++ b/src/shared/components/Crew/CrewWrapper/CrewWrapper.tsx @@ -0,0 +1,26 @@ +import React, { memo, ReactNode } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { SingleProjectProvider } from 'Context/Project'; +import { ProjectTabsLayout } from 'Containers/Layouts/ProjectTabsLayout'; +import { TabContent } from 'Components/Tabs'; + +import classes from './crewWrapper.module.css'; + +interface Props { + children: ReactNode; +} + +const CrewWrapper = ({ children }: Props) => ( + + + + {children} + + + +); + +const CrewWrapperMemo = memo(CrewWrapper, areEqual); + +export { CrewWrapperMemo as CrewWrapper }; diff --git a/src/shared/components/Crew/CrewWrapper/crewWrapper.module.css b/src/shared/components/Crew/CrewWrapper/crewWrapper.module.css new file mode 100644 index 0000000..f2feaed --- /dev/null +++ b/src/shared/components/Crew/CrewWrapper/crewWrapper.module.css @@ -0,0 +1,3 @@ +.tabContent { + min-height: calc(100vh - 150px); +} \ No newline at end of file diff --git a/src/shared/components/Crew/CrewWrapper/index.ts b/src/shared/components/Crew/CrewWrapper/index.ts new file mode 100644 index 0000000..1872c7a --- /dev/null +++ b/src/shared/components/Crew/CrewWrapper/index.ts @@ -0,0 +1 @@ +export { CrewWrapper } from './CrewWrapper'; diff --git a/src/shared/components/Crew/EmployeeDirectory/EmployeeDirectory.tsx b/src/shared/components/Crew/EmployeeDirectory/EmployeeDirectory.tsx new file mode 100644 index 0000000..7eced83 --- /dev/null +++ b/src/shared/components/Crew/EmployeeDirectory/EmployeeDirectory.tsx @@ -0,0 +1,82 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { UserModel } from 'Containers/User/Models/UserModel'; +import { PurpleButton } from 'Components/Button'; + +import { EmployeeRow } from 'Components/Crew'; +import { Icon } from 'Components/Icons'; +import classes from './employeeDirectory.module.css'; + +interface Props { + employees: Array; + selectedMembers: any[]; + showError: boolean; + disableButton: boolean; + searchValue: string; + onClickMemberRow: (e: any) => void; + onClickSelectCrew: (e: any) => void; +} + +const EmployeeDirectory = ({ + employees, + selectedMembers, + showError, + disableButton, + searchValue, + onClickMemberRow, + onClickSelectCrew, +}: Props) => ( +
    + {showError &&

    Please select one or more team members

    } + +

    Employee Directory

    + + {employees.length > 0 && + employees.map( + ({ id, first_name: firstName, last_name: lastName, full_name: fullName, avatar_url: avatar, roles }) => ( + + ) + )} + + {employees.length === 0 && searchValue.length > 0 && ( +
    +

    Please find an employee and select them to add them to the project.

    +
    +
    + +
    +

    No Contacts found matching:

    +

    {`"${searchValue}"`}

    +
    +
    + + Select Crew + +
    +
    + )} + + {employees.length > 0 && ( +
    + + Select Crew + +
    + )} +
    +); + +const EmployeeDirectoryMemo = memo(EmployeeDirectory, areEqual); + +export { EmployeeDirectoryMemo as EmployeeDirectory }; diff --git a/src/shared/components/Crew/EmployeeDirectory/employeeDirectory.module.css b/src/shared/components/Crew/EmployeeDirectory/employeeDirectory.module.css new file mode 100644 index 0000000..941298d --- /dev/null +++ b/src/shared/components/Crew/EmployeeDirectory/employeeDirectory.module.css @@ -0,0 +1,79 @@ +.employeeDirectoryBase { + margin: 20px 0; +} + +.errorMessage { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 21px; + color: #E82828; + margin-bottom: 16px; +} + +.title { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #777185; + margin-bottom: 24px; +} + +.buttonContainer { + width: 100%; + display: flex; + justify-content: center; + margin-top: 24px; +} + +.buttonContainer button { + width: 240px; +} + +.noEmployeesContainer { + width: 100%; + height: 300px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #777185; +} + +.noMatchContainer { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.searchIcon { + width: 56px; + height: 56px; + border-radius: 28px; + display: flex; + justify-content: center; + align-items: center; + background: #F4E5FF; + margin-bottom: 10px; +} + +.noEmployeesText { + margin-bottom: 0; +} + +.searchText { + font-weight: 600; + color: #000000; +} diff --git a/src/shared/components/Crew/EmployeeDirectory/index.ts b/src/shared/components/Crew/EmployeeDirectory/index.ts new file mode 100644 index 0000000..88e776b --- /dev/null +++ b/src/shared/components/Crew/EmployeeDirectory/index.ts @@ -0,0 +1 @@ +export { EmployeeDirectory } from './EmployeeDirectory'; diff --git a/src/shared/components/Crew/EmployeeRow/EmployeeRow.tsx b/src/shared/components/Crew/EmployeeRow/EmployeeRow.tsx new file mode 100644 index 0000000..d54bb27 --- /dev/null +++ b/src/shared/components/Crew/EmployeeRow/EmployeeRow.tsx @@ -0,0 +1,59 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { Avatar } from 'Components/Avatar'; +import { initials } from 'Utils/helpers'; + +import { Roles } from 'Containers/People'; +import { Icon } from 'Components/Icons'; +import classes from './employeeRow.module.css'; + +const getAvatar = (avatar, firstName, lastName) => + avatar ? ( + + ) : ( +
    {initials(firstName, lastName)}
    + ); + +interface Props { + id: string; + firstName: string; + lastName: string; + fullName: string; + avatar: string; + roles: any[]; + selectedMembers: any[]; + onClickMemberRow: (e: any) => void; +} + +const EmployeeRow = ({ + id, + firstName, + lastName, + fullName, + avatar, + roles, + selectedMembers, + onClickMemberRow, +}: Props) => ( +
    +
    + {getAvatar(avatar, firstName, lastName)} +

    {fullName}

    +
    +
    + + +
    +
    +); + +const EmployeeRowMemo = memo(EmployeeRow, areEqual); + +export { EmployeeRowMemo as EmployeeRow }; diff --git a/src/shared/components/Crew/EmployeeRow/employeeRow.module.css b/src/shared/components/Crew/EmployeeRow/employeeRow.module.css new file mode 100644 index 0000000..9446248 --- /dev/null +++ b/src/shared/components/Crew/EmployeeRow/employeeRow.module.css @@ -0,0 +1,62 @@ +.memberRowBase { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 16px 24px 0; + padding-bottom: 14px; + border-bottom: 1px solid #e8e7ed; +} + +.memberDetails { + display: flex; + flex-direction: row; + align-items: center; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 20px; +} + +.initials { + width: 40px; + height: 40px; + border-radius: 20px; + background: #d2cfda; + border: 1px solid #ffffff; + display: flex; + justify-content: center; + align-items: center; +} + +.name { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000; + margin: 0 0 0 16px; +} + +.checkBox { + width: 32px; + height: 32px; + order: 1; + z-index: 2; + position: absolute; + right: 30px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + visibility: hidden; +} + +.roleTags { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: auto 16px; +} diff --git a/src/shared/components/Crew/EmployeeRow/index.ts b/src/shared/components/Crew/EmployeeRow/index.ts new file mode 100644 index 0000000..bfd3b30 --- /dev/null +++ b/src/shared/components/Crew/EmployeeRow/index.ts @@ -0,0 +1 @@ +export { EmployeeRow } from './EmployeeRow'; diff --git a/src/shared/components/Crew/EmployeesEmptyPlaceholder/EmployeesEmptyPlaceholder.tsx b/src/shared/components/Crew/EmployeesEmptyPlaceholder/EmployeesEmptyPlaceholder.tsx new file mode 100644 index 0000000..b931e19 --- /dev/null +++ b/src/shared/components/Crew/EmployeesEmptyPlaceholder/EmployeesEmptyPlaceholder.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; +import { Icon } from 'Components/Icons'; + +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './employeesEmptyPlaceholder.module.css'; + +const EmployeesEmptyPlaceholder = () => ( +
    +
    + +
    You haven’t added any team employees yet
    +
    Go to the people section, and invite your employees to join your company!
    +
    +
    +); + +const EmployeesEmptyPlaceholderMemo = memo(EmployeesEmptyPlaceholder, areEqual); + +export { EmployeesEmptyPlaceholderMemo as EmployeesEmptyPlaceholder }; diff --git a/src/shared/components/Crew/EmployeesEmptyPlaceholder/employeesEmptyPlaceholder.module.css b/src/shared/components/Crew/EmployeesEmptyPlaceholder/employeesEmptyPlaceholder.module.css new file mode 100644 index 0000000..43fb8ac --- /dev/null +++ b/src/shared/components/Crew/EmployeesEmptyPlaceholder/employeesEmptyPlaceholder.module.css @@ -0,0 +1,38 @@ +.contentWrapper { + width: 100%; + height: 400px; +} + +.content { + max-width: 350px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.content > svg { + transform: scale(0.7); +} + +.heading { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #777185; + margin-bottom: 10px; +} + +.copy { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #777185; + width: 280px; +} diff --git a/src/shared/components/Crew/EmployeesEmptyPlaceholder/index.ts b/src/shared/components/Crew/EmployeesEmptyPlaceholder/index.ts new file mode 100644 index 0000000..ec6fc8d --- /dev/null +++ b/src/shared/components/Crew/EmployeesEmptyPlaceholder/index.ts @@ -0,0 +1 @@ +export { EmployeesEmptyPlaceholder } from './EmployeesEmptyPlaceholder'; diff --git a/src/shared/components/Crew/RemoveMemberModal/RemoveMemberModal.tsx b/src/shared/components/Crew/RemoveMemberModal/RemoveMemberModal.tsx new file mode 100644 index 0000000..3cec395 --- /dev/null +++ b/src/shared/components/Crew/RemoveMemberModal/RemoveMemberModal.tsx @@ -0,0 +1,90 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Modal } from 'Components/Modal'; +import { EmailAnchor } from 'Components/Anchor/EmailAnchor'; +import { PhoneAnchor } from 'Components/Anchor/PhoneAnchor'; +import { DeleteButton } from 'Components/Button'; +import { Icon } from 'Components/Icons'; +import { Roles } from 'Containers/People'; + +import classes from './removeMemberModal.module.css'; + +interface Props { + id: string; + avatar?: any; + name: string; + email?: string; + flag: string; + phone?: string; + extension?: string; + roles: any[]; + isOpen: boolean; + fetching: boolean; + modalCloseClick: (e: any) => void; + onClickRemoveProject: (e: any) => void; +} + +const RemoveMemberModal = ({ + id, + isOpen, + fetching, + avatar, + name, + email, + flag, + phone, + extension, + roles, + modalCloseClick, + onClickRemoveProject, +}: Props) => ( +
    + +
    + {avatar} + {name} + +
    + +
    + {email && ( + + {email} + + )} + + {phone && ( + + + {phone} {extension && {`\u2022 Ext ${extension}`}} + + )} + + Remove From Project + +
    +     +
    +); + +RemoveMemberModal.defaultProps = { + avatar: undefined, + email: 'email@example.com', + phone: '999 999 9999', + extension: undefined, +}; + +const RemoveMemberModalMemo = memo(RemoveMemberModal, areEqual); + +export { RemoveMemberModalMemo as RemoveMemberModal }; diff --git a/src/shared/components/Crew/RemoveMemberModal/index.ts b/src/shared/components/Crew/RemoveMemberModal/index.ts new file mode 100644 index 0000000..46cba99 --- /dev/null +++ b/src/shared/components/Crew/RemoveMemberModal/index.ts @@ -0,0 +1 @@ +export { RemoveMemberModal } from './RemoveMemberModal'; diff --git a/src/shared/components/Crew/RemoveMemberModal/removeMemberModal.module.css b/src/shared/components/Crew/RemoveMemberModal/removeMemberModal.module.css new file mode 100644 index 0000000..acbf6f8 --- /dev/null +++ b/src/shared/components/Crew/RemoveMemberModal/removeMemberModal.module.css @@ -0,0 +1,101 @@ +.modalContent { + height: 420px; + padding: 1.3em 1.5em; + box-shadow: 0px 24px 44px rgba(119, 113, 133, 0.2); + border-radius: 5px; +} +.modalDialog { + max-width: 648px; +} +.modalHeader { + padding: 0 0 0.5em 0; + height: 40px; + border-color: #e8e7ed; +} +.modalHeader > h5 { + align-items: flex-start; +} +.modalTitle { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 24px; + color: #5b476b; + width: 85%; + text-align: center; +} +.modalBody { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 1.3rem 0 1.1rem 0; +} + +.infoModalHeader { + width: 100%; + max-width: 343px; + border-bottom: 1px solid #d2cfda; + padding-bottom: 9px !important; +} + +.headerName { + font-weight: 600; + font-size: 20px; + line-height: 30px; + color: #000000; +} +.buttonsWrapper { + margin-top: 1.7em; +} +.modalButtons { + background-color: #ffffff; + width: 327px; + height: 44px; +} +.modalPill { + justify-content: center; + color: #777185; + border: 1px solid #d2cfda; + border-radius: 24px; +} +.modalPill:hover, +.modalPill:focus { + color: #777185; +} + +.email { + justify-content: center; + color: #777185 !important; +} + +.edit { + color: #9a00ff; + border-color: #9a00ff; + border-radius: 5px; +} +.edit:hover, +.edit:focus { + color: #ffffff; + background-color: #9a00ff; +} +.modalFooter { + padding: 1rem 0 0 0; + border: none; + justify-content: center; +} + +.removeButton { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #e82828; +} + +.roleTag { + margin-top: unset; +} diff --git a/src/shared/components/Crew/index.ts b/src/shared/components/Crew/index.ts new file mode 100644 index 0000000..0f39596 --- /dev/null +++ b/src/shared/components/Crew/index.ts @@ -0,0 +1,5 @@ +export { Crew } from './Crew'; +export { CrewWrapper } from './CrewWrapper'; +export { EmployeeDirectory } from './EmployeeDirectory'; +export { EmployeeRow } from './EmployeeRow'; +export { EmployeesEmptyPlaceholder } from './EmployeesEmptyPlaceholder'; diff --git a/src/shared/components/Dashboard/CreateProjectButton/CreateProjectButton.tsx b/src/shared/components/Dashboard/CreateProjectButton/CreateProjectButton.tsx new file mode 100644 index 0000000..66dfb82 --- /dev/null +++ b/src/shared/components/Dashboard/CreateProjectButton/CreateProjectButton.tsx @@ -0,0 +1,24 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { Icon } from 'Components/Icons'; +import { PurpleButton } from 'Components/Button'; + +interface Props { + className?: string; +} + +const CreateProjectButton = ({ className }: Props) => ( + // + // Create Project + // + <>{className} +); + +CreateProjectButton.defaultProps = { + className: null, +}; + +const CreateProjectButtonButtonMemo = memo(CreateProjectButton, areEqual); + +export { CreateProjectButtonButtonMemo as CreateProjectButton }; diff --git a/src/shared/components/Dashboard/CreateProjectButton/index.ts b/src/shared/components/Dashboard/CreateProjectButton/index.ts new file mode 100644 index 0000000..3741108 --- /dev/null +++ b/src/shared/components/Dashboard/CreateProjectButton/index.ts @@ -0,0 +1 @@ +export { CreateProjectButton } from "./CreateProjectButton"; diff --git a/src/shared/components/Dashboard/Dashboard.tsx b/src/shared/components/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..7f27c58 --- /dev/null +++ b/src/shared/components/Dashboard/Dashboard.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +interface Props {} + +const Dashboard = ({}: Props) => ( +
    +
    +
    +
    +
    +
    +); + +const DashboardMemo = memo(Dashboard, areEqual); + +export { DashboardMemo as Dashboard }; diff --git a/src/shared/components/Dashboard/DashboardGoogleMap/DashboardGoogleMap.tsx b/src/shared/components/Dashboard/DashboardGoogleMap/DashboardGoogleMap.tsx new file mode 100644 index 0000000..f926720 --- /dev/null +++ b/src/shared/components/Dashboard/DashboardGoogleMap/DashboardGoogleMap.tsx @@ -0,0 +1,33 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { GoogleMap } from 'Components/GoogleMap'; + +import { CompanyProjectsDataModal } from 'Containers/Projects/Modals'; +import classes from './dashboardGoogleMap.module.css'; + +interface Props { + myProjects: CompanyProjectsDataModal; + fetching: any; + activeProject: any; + handleChangeProject: any; + center: any; + zoom: any; +} + +const DashboardGoogleMap = ({ myProjects, fetching, activeProject, handleChangeProject, center, zoom }: Props) => ( +
    + +
    +); + +const DashboardGoogleMapMemo = memo(DashboardGoogleMap, areEqual); + +export { DashboardGoogleMapMemo as DashboardGoogleMap }; diff --git a/src/shared/components/Dashboard/DashboardGoogleMap/dashboardGoogleMap.module.css b/src/shared/components/Dashboard/DashboardGoogleMap/dashboardGoogleMap.module.css new file mode 100644 index 0000000..dbb7fcf --- /dev/null +++ b/src/shared/components/Dashboard/DashboardGoogleMap/dashboardGoogleMap.module.css @@ -0,0 +1,4 @@ +.cardBase { + background-color: #ffffff; + box-shadow: 0 1px 18px rgba(122, 111, 252, 0.15); +} diff --git a/src/shared/components/Dashboard/ProjectRow/ProjectRow.tsx b/src/shared/components/Dashboard/ProjectRow/ProjectRow.tsx new file mode 100644 index 0000000..2bf91f5 --- /dev/null +++ b/src/shared/components/Dashboard/ProjectRow/ProjectRow.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './projectRow.module.css'; + +interface Props { + title: any; + uid: any; + alias: any; + numOfUnits: number; + numOfPhotos: number; + numOfFloors: number; + selected: boolean; + onClick: any; +} + +const ProjectRow = ({ title, uid, alias, numOfPhotos, numOfUnits, selected, onClick, numOfFloors }: Props) => ( +
    +
    {title}
    +
    +
    {uid}
    +
    + {`${numOfUnits} Units • ${numOfFloors} Floors • ${numOfPhotos} Photos`} +
    +
    + {alias &&
    {alias}
    } +
    +); + +const ProjectRowMemo = memo(ProjectRow, areEqual); + +export { ProjectRowMemo as ProjectRow }; diff --git a/src/shared/components/Dashboard/ProjectRow/index.ts b/src/shared/components/Dashboard/ProjectRow/index.ts new file mode 100644 index 0000000..ce0dedb --- /dev/null +++ b/src/shared/components/Dashboard/ProjectRow/index.ts @@ -0,0 +1 @@ +export { ProjectRow } from './ProjectRow'; diff --git a/src/shared/components/Dashboard/ProjectRow/projectRow.module.css b/src/shared/components/Dashboard/ProjectRow/projectRow.module.css new file mode 100644 index 0000000..b417140 --- /dev/null +++ b/src/shared/components/Dashboard/ProjectRow/projectRow.module.css @@ -0,0 +1,57 @@ +.main { + padding: 8px 0; + border-bottom: 1px solid #E8E7ED; +} + +.mainActive { + padding: 8px 0; + border-bottom: 1px solid rgba(154, 0, 255, 0.5); +} + +.title, .titleActive, .uid, .numbers, .alias { + font-family: IBM Plex Sans; + font-style: normal; +} + +.title { + font-weight: 600; + font-size: 16px; + line-height: 24px; +} + +.titleActive { + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #9A00FF; +} + +.row { + display: flex; + justify-content: space-between; + margin-top: 5px; +} + +.uid { + width: 40%; + font-weight: 600; + font-size: 14px; + line-height: 18px; + letter-spacing: -0.015em; + color: #777185; +} + +.numbers { + width: 60%; + text-align: right; + font-weight: normal; + font-size: 12.003px; + line-height: 20px; + color: #777185; +} + +.alias { + font-weight: 600; + font-size: 14px; + line-height: 18px; +} diff --git a/src/shared/components/Dashboard/ProjectSelection/ProjectSelection.tsx b/src/shared/components/Dashboard/ProjectSelection/ProjectSelection.tsx new file mode 100644 index 0000000..fc5a2f3 --- /dev/null +++ b/src/shared/components/Dashboard/ProjectSelection/ProjectSelection.tsx @@ -0,0 +1,75 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { CompanyProjectsDataModal } from 'Containers/Projects/Modals'; + +// import { Spinner } from 'Components/Spinner'; +import { ProjectRow } from 'Containers/ProjectRow'; +import { Spinner } from 'Components/Spinner'; +import classes from './projectSelection.module.css'; + +interface Props { + myProjects: CompanyProjectsDataModal; + fetching: any; + handleChangeProject: any; + activeProject: any; + setTabWIP?: any; + setTabProjects: any; + activeTab: number; + handleViewAll: any; +} + +const ProjectSelection = ({ + myProjects, + fetching, + handleChangeProject, + activeProject, + // setTabWIP, + setTabProjects, + activeTab, + handleViewAll, +}: Props) => ( +
    +
    + View All +
    +
    +
    + My Projects +
    +
    + {fetching && ( +
    + +
    + )} +
    + {/* TODO:: TO AJ - don't use nested ternary expressions (eslint doesn't like them) */} + {!fetching && + myProjects?.data?.length > 0 && + myProjects.data.map((project) => ( + + ))} +
    +
    +); + +const ProjectSelectionMemo = memo(ProjectSelection, areEqual); + +export { ProjectSelectionMemo as ProjectSelection }; diff --git a/src/shared/components/Dashboard/ProjectSelection/index.ts b/src/shared/components/Dashboard/ProjectSelection/index.ts new file mode 100644 index 0000000..615d9fe --- /dev/null +++ b/src/shared/components/Dashboard/ProjectSelection/index.ts @@ -0,0 +1 @@ +export { ProjectSelection } from './ProjectSelection'; diff --git a/src/shared/components/Dashboard/ProjectSelection/projectSelection.module.css b/src/shared/components/Dashboard/ProjectSelection/projectSelection.module.css new file mode 100644 index 0000000..80ae2c8 --- /dev/null +++ b/src/shared/components/Dashboard/ProjectSelection/projectSelection.module.css @@ -0,0 +1,84 @@ +.cardBase { + background-color: #ffffff; + box-shadow: 0 1px 18px rgba(122, 111, 252, 0.15); + height: calc(100vh - 95px); + padding: 25px; + /* Keep it visible on small devices ? */ + min-width: 240px; + overflow: hidden; +} + +.tabsRow { + display: flex; + justify-content: flex-start; + position: absolute; + left: 0; + margin-top: 32px; + padding-left: 24px; + padding-right: 24px; + border-bottom: 1px solid #D2CFDA; + width: 100%; + padding-bottom: 33px; +} + +.tabContainer { + cursor: pointer; + border-bottom: 2px solid white; + position: absolute; + left: 0; + padding: 0 24px; + text-align: center; + + font-family: IBM Plex Sans; + font-size: 16px; + line-height: 24px; +} + +.selectedTabContainer { + font-style: normal; + font-weight: 600; +} + +.selectedTabContainer::after { + content: ''; + position: absolute; + bottom: -10px; + height: 2px; + width: 100%; + background: #9A00FF; + left: 0; +} + +.secondPosition { + position: absolute; + left: 140px; +} + +.viewAll { + cursor: pointer; + position: absolute; + right: 0; + padding: 0 24px; + text-decoration: underline; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 16px; + /* identical to box height, or 114% */ + + color: #777185; +} + +.projectsContainer { + position: absolute; + top: 90px; + max-height: calc(100vh - 200px); + width: calc(100% - 48px); +} + +.relativePos { + position: relative; + margin-top: auto; + margin-bottom: auto; +} diff --git a/src/shared/components/Dashboard/RecentlyAccessed/RecentlyAccessed.tsx b/src/shared/components/Dashboard/RecentlyAccessed/RecentlyAccessed.tsx new file mode 100644 index 0000000..95e1928 --- /dev/null +++ b/src/shared/components/Dashboard/RecentlyAccessed/RecentlyAccessed.tsx @@ -0,0 +1,24 @@ +import React, { memo } from "react"; +import { areEqual } from "Utils/equalityChecks"; + +import { Anchor } from "Components/Anchor"; +import { CreateProjectButton } from "Containers/Dashboard"; + +import classes from "./recentlyAccessed.module.css"; + +const RecentlyAccessed = () => ( +
    +
    +
    Recently Accessed
    + + View All + +
    +

    No projects yet. Create a new project.

    + +
    +); + +const RecentlyAccessedMemo = memo(RecentlyAccessed, areEqual); + +export { RecentlyAccessedMemo as RecentlyAccessed }; diff --git a/src/shared/components/Dashboard/RecentlyAccessed/index.ts b/src/shared/components/Dashboard/RecentlyAccessed/index.ts new file mode 100644 index 0000000..30cb5de --- /dev/null +++ b/src/shared/components/Dashboard/RecentlyAccessed/index.ts @@ -0,0 +1 @@ +export { RecentlyAccessed } from "./RecentlyAccessed"; diff --git a/src/shared/components/Dashboard/RecentlyAccessed/recentlyAccessed.module.css b/src/shared/components/Dashboard/RecentlyAccessed/recentlyAccessed.module.css new file mode 100644 index 0000000..7d9bc2e --- /dev/null +++ b/src/shared/components/Dashboard/RecentlyAccessed/recentlyAccessed.module.css @@ -0,0 +1,39 @@ +.cardBase { + background-color: #ffffff; + box-shadow: 0 1px 18px rgba(122, 111, 252, 0.15); + height: calc(100vh - 95px); + padding: 25px; +} + +.title { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000; +} + +.anchor { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 16px; + text-decoration-line: underline; + color: #777185; +} + +.p { + margin-top: 22px; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + color: #777185; +} + +.createProjectButton { + margin-top: 45px; +} \ No newline at end of file diff --git a/src/shared/components/Dashboard/index.ts b/src/shared/components/Dashboard/index.ts new file mode 100644 index 0000000..fad1e39 --- /dev/null +++ b/src/shared/components/Dashboard/index.ts @@ -0,0 +1,2 @@ +export { Dashboard } from "./Dashboard"; +export { CreateProjectButton } from "./CreateProjectButton"; diff --git a/src/shared/components/DropDown/DropDown.tsx b/src/shared/components/DropDown/DropDown.tsx new file mode 100644 index 0000000..b8923c8 --- /dev/null +++ b/src/shared/components/DropDown/DropDown.tsx @@ -0,0 +1,53 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { DropDownItem } from 'Containers/DropDown'; + +import classes from './dropDown.module.css'; + +type ListTypes = { + id: number; + name: string; + // eslint-disable-next-line + display_name?: string; +}; +interface Props { + id: string; + className?: string; + selected: number; + items: Array; + showDropDown: boolean; + size?: string; + onSelectItem: (e: any) => void; +} + +const DropDown = ({ id, className, selected, items, onSelectItem, showDropDown, size }: Props) => ( +
      + {items.length > 0 && + items.map((item) => ( + + ))} +
    +); + +DropDown.defaultProps = { + className: undefined, + size: 'default', +}; + +const DropDownMemo = memo(DropDown, areEqual); + +export { DropDownMemo as DropDown }; diff --git a/src/shared/components/DropDown/DropDownItem/DropDownItem.tsx b/src/shared/components/DropDown/DropDownItem/DropDownItem.tsx new file mode 100644 index 0000000..7831b81 --- /dev/null +++ b/src/shared/components/DropDown/DropDownItem/DropDownItem.tsx @@ -0,0 +1,58 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Anchor } from 'Components/Anchor'; + +import classes from './dropDownItem.module.css'; + +interface Props { + id: number; + name: string; + selected: number; + onSelectItem: (e: any) => void; +} + +const DropDownItem = React.forwardRef(({ id, name, selected, onSelectItem }: Props, dropDownRef: any) => + dropDownRef ? ( +
  • { + dropDownRef.current = ref; + }} + > + + {name} + +
    • + ) : ( +
  • + + {name} + +
    • + ) +); + +const DropDownMemo = memo(DropDownItem, areEqual); + +export { DropDownMemo as DropDownItem }; diff --git a/src/shared/components/DropDown/DropDownItem/dropDownItem.module.css b/src/shared/components/DropDown/DropDownItem/dropDownItem.module.css new file mode 100644 index 0000000..6b8b598 --- /dev/null +++ b/src/shared/components/DropDown/DropDownItem/dropDownItem.module.css @@ -0,0 +1,19 @@ +.dropDownItemText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 21px; + color: #000000; + padding: 16px 0; + border-bottom: 1px solid #E8E7ED; + text-align: center; +} + +.dropDownItemText:hover { + background-color: #E8E7ED !important; +} + +.dropDownItemTextSelected { + background-color: #F4E5FF !important; +} diff --git a/src/shared/components/DropDown/DropDownItem/index.ts b/src/shared/components/DropDown/DropDownItem/index.ts new file mode 100644 index 0000000..56af884 --- /dev/null +++ b/src/shared/components/DropDown/DropDownItem/index.ts @@ -0,0 +1 @@ +export { DropDownItem } from './DropDownItem'; diff --git a/src/shared/components/DropDown/MiniDropdownItem/MiniDropdownItem.tsx b/src/shared/components/DropDown/MiniDropdownItem/MiniDropdownItem.tsx new file mode 100644 index 0000000..2d3e7a2 --- /dev/null +++ b/src/shared/components/DropDown/MiniDropdownItem/MiniDropdownItem.tsx @@ -0,0 +1,58 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Anchor } from 'Components/Anchor'; + +import classes from './miniDropdownItem.module.css'; + +interface Props { + id: number; + name: string; + selected: number; + onSelectItem: (e: any) => void; +} + +const MiniDropdownItem = React.forwardRef(({ id, name, selected, onSelectItem }: Props, dropDownRef: any) => + dropDownRef ? ( +
  • { + dropDownRef.current = ref; + }} + > + + {name} + +
    • + ) : ( +
  • + + {name} + +
    • + ) +); + +const MiniDropdownItemMemo = memo(MiniDropdownItem, areEqual); + +export { MiniDropdownItemMemo as MiniDropdownItem }; diff --git a/src/shared/components/DropDown/MiniDropdownItem/index.ts b/src/shared/components/DropDown/MiniDropdownItem/index.ts new file mode 100644 index 0000000..3ec0b1d --- /dev/null +++ b/src/shared/components/DropDown/MiniDropdownItem/index.ts @@ -0,0 +1 @@ +export { MiniDropdownItem } from './MiniDropdownItem'; diff --git a/src/shared/components/DropDown/MiniDropdownItem/miniDropdownItem.module.css b/src/shared/components/DropDown/MiniDropdownItem/miniDropdownItem.module.css new file mode 100644 index 0000000..81cf79b --- /dev/null +++ b/src/shared/components/DropDown/MiniDropdownItem/miniDropdownItem.module.css @@ -0,0 +1,24 @@ +.miniDropdownItem { + height: 10px; + width: inherit; +} + +.dropDownItemText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 0; + color: #000000; + padding: 16px 0; + border-bottom: 1px solid #E8E7ED; + text-align: center; +} + +.dropDownItemText:hover { + background-color: #E8E7ED !important; +} + +.dropDownItemTextSelected { + background-color: #F4E5FF !important; +} diff --git a/src/shared/components/DropDown/MiniOptionsDropdown/MiniOptionsDropdown.tsx b/src/shared/components/DropDown/MiniOptionsDropdown/MiniOptionsDropdown.tsx new file mode 100644 index 0000000..98da23c --- /dev/null +++ b/src/shared/components/DropDown/MiniOptionsDropdown/MiniOptionsDropdown.tsx @@ -0,0 +1,75 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { TextBox } from 'Components/TextBox'; +import { Icon } from 'Components/Icons'; +import { DropDown, dropdownSizes } from 'Components/DropDown'; + +import formClasses from 'Themes/form/form.module.css'; +import classes from './miniOptionsDropdown.module.css'; + +type ListTypes = { + id: number; + name: string; +}; + +interface Props { + className?: string; + optionSelected: string; + items: Array; + selectedOptionId: number; + invalid?: boolean; + placeHolder?: string; + showDropdown: boolean; + onSelectItem: (e: any) => void; + onClickIcon: (e: any) => void; +} + +const MiniOptionsDropdown = ({ + className, + optionSelected, + items, + selectedOptionId, + invalid, + placeHolder, + showDropdown, + onSelectItem, + onClickIcon, +}: Props) => ( +
    + 0 ? optionSelected : `${placeHolder}`} + /> + + {items && ( + + )} +
    +); + +MiniOptionsDropdown.defaultProps = { + className: undefined, + invalid: false, + placeHolder: undefined, +}; + +const MiniOptionsDropdownMemo = memo(MiniOptionsDropdown, areEqual); + +export { MiniOptionsDropdownMemo as MiniOptionsDropdown }; diff --git a/src/shared/components/DropDown/MiniOptionsDropdown/index.ts b/src/shared/components/DropDown/MiniOptionsDropdown/index.ts new file mode 100644 index 0000000..b09c1e9 --- /dev/null +++ b/src/shared/components/DropDown/MiniOptionsDropdown/index.ts @@ -0,0 +1 @@ +export { MiniOptionsDropdown } from './MiniOptionsDropdown'; diff --git a/src/shared/components/DropDown/MiniOptionsDropdown/miniOptionsDropdown.module.css b/src/shared/components/DropDown/MiniOptionsDropdown/miniOptionsDropdown.module.css new file mode 100644 index 0000000..147b9bd --- /dev/null +++ b/src/shared/components/DropDown/MiniOptionsDropdown/miniOptionsDropdown.module.css @@ -0,0 +1,23 @@ +.optionSelectBase { + position: relative; + margin-bottom: 1px; +} + +.icon { + position: absolute; + right: 16px; + top: 40%; +} + +.dropDown { + max-height: 272px; +} +.optionSelectBase > input { + background-color: transparent !important; + padding: 8px !important; +} + +.input { + font-size: 12px !important; + font-weight: 400 !important; +} \ No newline at end of file diff --git a/src/shared/components/DropDown/dropDown.module.css b/src/shared/components/DropDown/dropDown.module.css new file mode 100644 index 0000000..a2c3ca5 --- /dev/null +++ b/src/shared/components/DropDown/dropDown.module.css @@ -0,0 +1,16 @@ +.fieldListBase { + inset: unset!important; + transform: unset!important; + background: #FFFFFF; + border: 1px solid #E8E7ED; + box-sizing: border-box; + box-shadow: 0px -3px 6px rgba(142, 134, 163, 0.1); + width: 100%; + height: auto; + padding: 0; + overflow-y: auto; +} + +.fieldListBase:focus, .fieldListBase:focus-visible { + outline: unset!important; +} diff --git a/src/shared/components/DropDown/dropdownSizes.ts b/src/shared/components/DropDown/dropdownSizes.ts new file mode 100644 index 0000000..a30b953 --- /dev/null +++ b/src/shared/components/DropDown/dropdownSizes.ts @@ -0,0 +1,4 @@ +export const dropdownSizes = { + default: 'default', + small: 'small,', +}; diff --git a/src/shared/components/DropDown/index.ts b/src/shared/components/DropDown/index.ts new file mode 100644 index 0000000..ddd6005 --- /dev/null +++ b/src/shared/components/DropDown/index.ts @@ -0,0 +1,3 @@ +export { DropDown } from './DropDown'; +export { MiniOptionsDropdown } from './MiniOptionsDropdown'; +export { dropdownSizes } from './dropdownSizes'; diff --git a/src/shared/components/DropZone/DropZone.tsx b/src/shared/components/DropZone/DropZone.tsx new file mode 100644 index 0000000..a4dad46 --- /dev/null +++ b/src/shared/components/DropZone/DropZone.tsx @@ -0,0 +1,35 @@ +/* eslint-disable */ +//The linter does not like prop spreading, but dropzone requires it +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; +import classes from "./dropzone.module.css"; +import { Icon } from "Components/Icons"; + +interface Props { + className?: string; + hasImages: boolean; + getRootProps: any; + getInputProps: any; +} + +const Dropzone = ({ className, hasImages, getRootProps, getInputProps }: Props) => ( + <> +
    + +
    +
    +
    + +
    +
    +

    Click to upload or drop into an album

    +
    +
    + +); +Dropzone.defaultProps = { + className: undefined, +}; +const DropzoneMemo = memo(Dropzone, areEqual); +export { DropzoneMemo as Dropzone }; diff --git a/src/shared/components/DropZone/dropzone.module.css b/src/shared/components/DropZone/dropzone.module.css new file mode 100644 index 0000000..be9c2cb --- /dev/null +++ b/src/shared/components/DropZone/dropzone.module.css @@ -0,0 +1,41 @@ +.container { + display: flex; + flex-direction: column; + background-color: #fff; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 12.003px; + line-height: 20px; + text-align: center; + color: #777185; +} +.hasImages { + flex-direction: row !important; + align-items: baseline !important; + padding-bottom: 1.5rem; +} +.dropZoneWrapper { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + border: 1px dashed #d2cfda; + border-radius: 8px; + margin-top: 1em; + margin-left: 0.5em; +} + +.uploadIcon { + height: 28px !important; + width: 28px !important; + text-align: center; + padding-top: 40px; +} +.messageContainer { + padding-top: 40px; + padding-bottom: 0px; + padding-left: 10px; + padding-right: 10px; +} \ No newline at end of file diff --git a/src/shared/components/DropZone/index.ts b/src/shared/components/DropZone/index.ts new file mode 100644 index 0000000..aa14770 --- /dev/null +++ b/src/shared/components/DropZone/index.ts @@ -0,0 +1 @@ +export { Dropzone } from './DropZone'; diff --git a/src/shared/components/ErrorMessages/ErrorMessages.tsx b/src/shared/components/ErrorMessages/ErrorMessages.tsx new file mode 100644 index 0000000..e27350d --- /dev/null +++ b/src/shared/components/ErrorMessages/ErrorMessages.tsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +// css +import classes from './errorMessages.module.css'; + +// props +interface Props { + message: string; + className?: string; +} + +const ErrorMessages = ({ message, className }: Props) => ( +
    +

    {message}

    +
    +); + +ErrorMessages.defaultProps = { + className: undefined, +}; + +const ErrorMessagesMemo = memo(ErrorMessages, areEqual); + +export { ErrorMessagesMemo as ErrorMessages }; diff --git a/src/shared/components/ErrorMessages/errorMessages.module.css b/src/shared/components/ErrorMessages/errorMessages.module.css new file mode 100644 index 0000000..396a634 --- /dev/null +++ b/src/shared/components/ErrorMessages/errorMessages.module.css @@ -0,0 +1,12 @@ +.errorMessageWrapper { + margin: 25px 0; +} + +.errorMessage { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #E82828; +} diff --git a/src/shared/components/ErrorMessages/index.ts b/src/shared/components/ErrorMessages/index.ts new file mode 100644 index 0000000..3a8c387 --- /dev/null +++ b/src/shared/components/ErrorMessages/index.ts @@ -0,0 +1 @@ +export { ErrorMessages } from './ErrorMessages'; diff --git a/src/shared/components/FloorDropDown/FloorDropDown.tsx b/src/shared/components/FloorDropDown/FloorDropDown.tsx new file mode 100644 index 0000000..639a0d2 --- /dev/null +++ b/src/shared/components/FloorDropDown/FloorDropDown.tsx @@ -0,0 +1,66 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { TextBox } from 'Components/TextBox'; +import { Icon } from 'Components/Icons'; +import { DropDown } from 'Components/DropDown'; + +import formClasses from 'Themes/form/form.module.css'; +import classes from './floorDropDown.module.css'; + +interface Props { + className?: string; + floorSelect: string; + numbers: Array; + selectedFloor: number; + invalid?: boolean; + showDropDown: boolean; + onChangeFloorSelect: (e: any) => void; + onSelectItem: (e: any) => void; + onClickIcon: (e: any) => void; +} + +const FloorDropDown = ({ + className, + floorSelect, + numbers, + selectedFloor, + invalid, + showDropDown, + onChangeFloorSelect, + onSelectItem, + onClickIcon, +}: Props) => ( +
    + + + {numbers && ( + + )} +
    +); + +FloorDropDown.defaultProps = { + className: undefined, + invalid: false, +}; + +const FloorDropDownMemo = memo(FloorDropDown, areEqual); + +export { FloorDropDownMemo as FloorDropDown }; diff --git a/src/shared/components/FloorDropDown/floorDropDown.module.css b/src/shared/components/FloorDropDown/floorDropDown.module.css new file mode 100644 index 0000000..89b6e86 --- /dev/null +++ b/src/shared/components/FloorDropDown/floorDropDown.module.css @@ -0,0 +1,19 @@ +.floorSelectBase { + position: relative; +} + +.icon { + position: absolute; + right: 0; + top: 40%; +} + +.dropDown { + max-height: 245px; +} +.floorSelectBase > input { + background-color: transparent; + padding-left: 0 !important; + padding-right: 0 !important; + border-bottom: none !important; +} diff --git a/src/shared/components/FloorDropDown/index.tsx b/src/shared/components/FloorDropDown/index.tsx new file mode 100644 index 0000000..0624877 --- /dev/null +++ b/src/shared/components/FloorDropDown/index.tsx @@ -0,0 +1 @@ +export { FloorDropDown } from './FloorDropDown'; diff --git a/src/shared/components/Form/Form.tsx b/src/shared/components/Form/Form.tsx new file mode 100644 index 0000000..74e1f76 --- /dev/null +++ b/src/shared/components/Form/Form.tsx @@ -0,0 +1,122 @@ +import React, { memo, ReactNode, useCallback, useRef, useState } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import { useDebounce } from "Hooks/useDebounce"; + +interface Props { + id?: string; + className?: string; + noValidate?: boolean; + submitButton?: ReactNode; + children: any; + onSubmit: (formValues: any) => void; +} + +/* + Note: + The form can use either a Submit button or the internal onChange to send form data back to the user + + A form button needs to be pass in through props and not children. We need a way to detect if a button + is being used or not to handle the form submission +*/ +const Form = ({ id, className, noValidate = true, submitButton, onSubmit, children }: Props) => { + // Using a reference is how we are going to do things the React way, with Bootstrap. + const formRef = useRef(null); + const [formData, setFormData] = useState({}); + const validate = useCallback( + (formData: any) => { + onSubmit(formData); + }, + [formData] + ); + + const submitWhenNoSubmitButton = (e: any) => { + e.preventDefault(); + }; + + // This will be the loca form submit. + const onSubmitLocal = useDebounce((e: any) => { + e.preventDefault(); + + formRef.current.classList.add("was-validated"); + + let value = ""; + switch (e.target.type) { + case "checkbox": + value = e.target.checked; + break; + case "text": + case "tel": + case "email": + value = e.target.value.trim(); + break; + default: + break; + } + + // This will handle an empty input + if (value?.length === 0) { + validate({ [e.target.name]: e.target.value, isValid: true }); + formRef.current.classList.remove("was-validated"); + return; + } + + if (!formRef.current.checkValidity()) { + e.preventDefault(); + e.stopPropagation(); + + // This will let the parent know that validation is false + validate({ [e.target.name]: e.target.value, isValid: false }); + return; + } + + // Update the control value in formData + setFormData({ + ...formData, + [e.target.name]: value, + }); + + // Pass formdata to the parent to check if + validate({ + ...formData, + [e.target.name]: e.target.value, + isValid: true, + isFinishedValidation: true, + }); + }, 700); + + const onChange = (e: any) => { + // If the submitButton prop does not exist, then trigger onSubmitLocal + if (!submitButton) onSubmitLocal(e); + }; + + return ( +
    +
    { + formRef.current = ref; + }} + onSubmit={(submitButton && onSubmitLocal) || submitWhenNoSubmitButton} + id={id} + className={`requires-validation ${className || ""}`} + noValidate={noValidate} + > + {children} + + {submitButton &&
    {submitButton}
    } +
    +
    + ); +}; + +Form.defaultProps = { + id: undefined, + className: undefined, + noValidate: true, + submitButton: undefined, +}; + +const FormMemo = memo(Form, areEqualShallow); + +export { FormMemo as Form }; diff --git a/src/shared/components/Form/form.module.css b/src/shared/components/Form/form.module.css new file mode 100644 index 0000000..61eec7a --- /dev/null +++ b/src/shared/components/Form/form.module.css @@ -0,0 +1,3 @@ +.form { + max-width: 100%; +} diff --git a/src/shared/components/Form/index.ts b/src/shared/components/Form/index.ts new file mode 100644 index 0000000..d39070f --- /dev/null +++ b/src/shared/components/Form/index.ts @@ -0,0 +1 @@ +export { Form } from './Form'; diff --git a/src/shared/components/GoogleMap/GoogleMap.tsx b/src/shared/components/GoogleMap/GoogleMap.tsx new file mode 100644 index 0000000..084b9a6 --- /dev/null +++ b/src/shared/components/GoogleMap/GoogleMap.tsx @@ -0,0 +1,68 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import GoogleMapReact from 'google-map-react'; +import { CompanyProjectsDataModal } from 'Containers/Projects/Modals'; +import { MapPin } from 'Containers/MapPin'; + +import { parseNumber } from 'Utils/numbers'; +// import { getCoordinatesFromAddress } from 'Utils/google'; +import classes from './googleMap.module.css'; +import MapStyle from './MapStyle'; + +interface Props { + center: { + lat?: number; + lng?: number; + }; + zoom: number; + myProjects: CompanyProjectsDataModal; + fetching: any; + handleChangeProject: any; + activeProject: any; +} + +const GoogleMap = ({ center, zoom, myProjects, fetching, handleChangeProject, activeProject }: Props) => ( +
    + + {!fetching && myProjects.data.length + ? myProjects.data.map((project) => { + // TODO:: need to find a better plugin to replace this logic in the MapPin container + + const { id, uid, address } = project; + const { latitude, longitude } = address; + + // const [lat] = useState(parseNumber(latitude)); + // const [lng] = useState(parseNumber(longitude)); + + // useEffect(() => { + // if (!latitude) { + // getCoordinatesFromAddress(address, setLat, setLng); + // } + // }, []); + + // this plugin require following props (lat, lng) in order to show a custom marker on the map + // so had to generate coordinates here for addresses that are entered manually + return ( + + ); + }) + : null} + +
    +); + +const GoogleMapMemo = memo(GoogleMap, areEqual); + +export { GoogleMapMemo as GoogleMap }; diff --git a/src/shared/components/GoogleMap/MapStyle.tsx b/src/shared/components/GoogleMap/MapStyle.tsx new file mode 100644 index 0000000..9626260 --- /dev/null +++ b/src/shared/components/GoogleMap/MapStyle.tsx @@ -0,0 +1,162 @@ +export default { + mapStyle: [ + { + elementType: 'geometry', + stylers: [ + { + color: '#f5f5f5', + }, + ], + }, + { + elementType: 'labels.icon', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + elementType: 'labels.text.fill', + stylers: [ + { + color: '#616161', + }, + ], + }, + { + elementType: 'labels.text.stroke', + stylers: [ + { + color: '#f5f5f5', + }, + ], + }, + { + featureType: 'administrative.land_parcel', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#bdbdbd', + }, + ], + }, + { + featureType: 'poi', + elementType: 'geometry', + stylers: [ + { + color: '#eeeeee', + }, + ], + }, + { + featureType: 'poi', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#757575', + }, + ], + }, + { + featureType: 'poi.park', + elementType: 'geometry', + stylers: [ + { + color: '#e5e5e5', + }, + ], + }, + { + featureType: 'poi.park', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, + { + featureType: 'road', + elementType: 'geometry', + stylers: [ + { + color: '#ffffff', + }, + ], + }, + { + featureType: 'road.arterial', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#757575', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'geometry', + stylers: [ + { + color: '#dadada', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#616161', + }, + ], + }, + { + featureType: 'road.local', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, + { + featureType: 'transit.line', + elementType: 'geometry', + stylers: [ + { + color: '#e5e5e5', + }, + ], + }, + { + featureType: 'transit.station', + elementType: 'geometry', + stylers: [ + { + color: '#eeeeee', + }, + ], + }, + { + featureType: 'water', + elementType: 'geometry', + stylers: [ + { + color: '#c9c9c9', + }, + ], + }, + { + featureType: 'water', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, + ], +}; diff --git a/src/shared/components/GoogleMap/googleMap.module.css b/src/shared/components/GoogleMap/googleMap.module.css new file mode 100644 index 0000000..c643994 --- /dev/null +++ b/src/shared/components/GoogleMap/googleMap.module.css @@ -0,0 +1,18 @@ +.googleMapBase { + width: 100%; + height: calc(100vh - 95px); +} + +.header { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + color: #777185; +} + +.tagline { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + color: #9692a0; +} \ No newline at end of file diff --git a/src/shared/components/GoogleMap/index.ts b/src/shared/components/GoogleMap/index.ts new file mode 100644 index 0000000..65d8b4d --- /dev/null +++ b/src/shared/components/GoogleMap/index.ts @@ -0,0 +1 @@ +export { GoogleMap } from "./GoogleMap"; diff --git a/src/shared/components/HubSpotModal/HubSpotModal.tsx b/src/shared/components/HubSpotModal/HubSpotModal.tsx new file mode 100644 index 0000000..8aa681a --- /dev/null +++ b/src/shared/components/HubSpotModal/HubSpotModal.tsx @@ -0,0 +1,64 @@ +import React, { memo } from 'react'; + +import { Modal } from 'Components/Modal'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Button, PurpleButton } from 'Components/Button'; + +import { InviteEmployees } from 'Containers/InviteEmployees'; +import classes from './hubSpotModal.module.css'; + +interface Props { + isOpen: boolean; + modalCloseClick: (e: any) => void; + chooseBook: (e: any) => void; + chooseSkip: (e: any) => void; + closeAll: (e: any) => void; + chosenAction: any; +} + +const HubSpotModal = ({ isOpen, modalCloseClick, chooseSkip, chooseBook, chosenAction, closeAll }: Props) => ( + +

    + Our Customers Get The Most Out Of Company By Booking a Discovery Call Before Beginning +

    +
    + {!chosenAction && ( + + Book Discovery Call + + )} + {!chosenAction && ( + + )} + +

    + It’s Easy To Get Your Team Started +

    +
    Copy and send them the link or invite by email
    +
    + } + footer={ +
    + + Done + +
    + } + isOpen={chosenAction === 0} + modalCloseClick={closeAll} + /> +     +); + +const HubSpotModalMemo = memo(HubSpotModal, areEqual); + +export { HubSpotModalMemo as HubSpotModal }; diff --git a/src/shared/components/HubSpotModal/hubSpotModal.module.css b/src/shared/components/HubSpotModal/hubSpotModal.module.css new file mode 100644 index 0000000..5c66082 --- /dev/null +++ b/src/shared/components/HubSpotModal/hubSpotModal.module.css @@ -0,0 +1,52 @@ +.modal { + font-family: IBM Plex Sans; + font-style: normal; + text-align: center; + background: white; +} + +.modalDialog { + height: 100%; + width: 100%; + margin: 0 auto; +} + +.modalContent { + height: 100%; + width: 100%; + border: unset; + border-radius: unset; +} + +.modalBody { + padding-top: 40px; +} + +.importantText { + padding-bottom: 25px; + + font-weight: bold; + font-size: 28px; + line-height: 40px; + + color: #000000; +} + +.image { + padding-top: 25px; + width: 150px; +} + +.text { + padding-top: 25px; + + font-weight: normal; + font-size: 16px; + line-height: 24px; + + color: #777185; +} + +.button { + margin-top: 1rem; +} diff --git a/src/shared/components/HubSpotModal/index.ts b/src/shared/components/HubSpotModal/index.ts new file mode 100644 index 0000000..e46397f --- /dev/null +++ b/src/shared/components/HubSpotModal/index.ts @@ -0,0 +1 @@ +export { HubSpotModal } from './HubSpotModal'; diff --git a/src/shared/components/Icons/ActionsDefault/ActionsDefault.tsx b/src/shared/components/Icons/ActionsDefault/ActionsDefault.tsx new file mode 100644 index 0000000..4c94f76 --- /dev/null +++ b/src/shared/components/Icons/ActionsDefault/ActionsDefault.tsx @@ -0,0 +1,32 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import ActionsDefault from "../../../Assets/actions-default.svg"; + +// Custom css +import classes from "./actionsDefault.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ActionsDefaultSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ActionsDefaultSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ActionsDefaultSvgMemo = memo(ActionsDefaultSvg, areEqualShallow); +export { ActionsDefaultSvgMemo as ActionsDefaultSvg }; diff --git a/src/shared/components/Icons/ActionsDefault/actionsDefault.module.css b/src/shared/components/Icons/ActionsDefault/actionsDefault.module.css new file mode 100644 index 0000000..264ea7b --- /dev/null +++ b/src/shared/components/Icons/ActionsDefault/actionsDefault.module.css @@ -0,0 +1,3 @@ +.actionsDefaultBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ActionsDefault/index.ts b/src/shared/components/Icons/ActionsDefault/index.ts new file mode 100644 index 0000000..aadff45 --- /dev/null +++ b/src/shared/components/Icons/ActionsDefault/index.ts @@ -0,0 +1 @@ +export { ActionsDefaultSvg } from "./ActionsDefault"; diff --git a/src/shared/components/Icons/ActionsPurple/ActionsPurple.tsx b/src/shared/components/Icons/ActionsPurple/ActionsPurple.tsx new file mode 100644 index 0000000..3842924 --- /dev/null +++ b/src/shared/components/Icons/ActionsPurple/ActionsPurple.tsx @@ -0,0 +1,32 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import ActionsPurple from "../../../Assets/actions-purple.svg"; + +// Custom css +import classes from "./actionsPurple.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ActionsPurpleSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ActionsPurpleSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ActionsPurpleSvgMemo = memo(ActionsPurpleSvg, areEqualShallow); +export { ActionsPurpleSvgMemo as ActionsPurpleSvg }; diff --git a/src/shared/components/Icons/ActionsPurple/actionsPurple.module.css b/src/shared/components/Icons/ActionsPurple/actionsPurple.module.css new file mode 100644 index 0000000..7b6d81f --- /dev/null +++ b/src/shared/components/Icons/ActionsPurple/actionsPurple.module.css @@ -0,0 +1,3 @@ +.actionsPurpleBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ActionsPurple/index.ts b/src/shared/components/Icons/ActionsPurple/index.ts new file mode 100644 index 0000000..e19a03b --- /dev/null +++ b/src/shared/components/Icons/ActionsPurple/index.ts @@ -0,0 +1 @@ +export { ActionsPurpleSvg } from "./ActionsPurple"; diff --git a/src/shared/components/Icons/AddButton/AddButton.tsx b/src/shared/components/Icons/AddButton/AddButton.tsx new file mode 100644 index 0000000..fde061f --- /dev/null +++ b/src/shared/components/Icons/AddButton/AddButton.tsx @@ -0,0 +1,34 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import AddButton from '../../../Assets/add-button-lg.svg'; +import AddButtonSmall from '../../../Assets/add-button-sm.svg'; + +// Custom css +import classes from './addButton.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; +} + +const AddButtonSvg = ({ className = '', id, svgItem }: Props) => { + switch (svgItem) { + case 2: + return ; + + default: + return ; + } +}; + +AddButtonSvg.defaultProps = { + svgItem: 1, + className: undefined, + id: undefined, +}; + +const AddButtonSvgMemo = memo(AddButtonSvg, areEqualShallow); + +export { AddButtonSvgMemo as AddButtonSvg }; diff --git a/src/shared/components/Icons/AddButton/addButton.module.css b/src/shared/components/Icons/AddButton/addButton.module.css new file mode 100644 index 0000000..b8481b8 --- /dev/null +++ b/src/shared/components/Icons/AddButton/addButton.module.css @@ -0,0 +1,3 @@ +.addButtonBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/AddButton/index.ts b/src/shared/components/Icons/AddButton/index.ts new file mode 100644 index 0000000..a856ab5 --- /dev/null +++ b/src/shared/components/Icons/AddButton/index.ts @@ -0,0 +1 @@ +export { AddButtonSvg } from './AddButton'; diff --git a/src/shared/components/Icons/AddressBuilding/AddressBuilding.tsx b/src/shared/components/Icons/AddressBuilding/AddressBuilding.tsx new file mode 100644 index 0000000..115a2d3 --- /dev/null +++ b/src/shared/components/Icons/AddressBuilding/AddressBuilding.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import AddressBuilding from '../../../Assets/addressBuilding.svg'; + +// Custom css +import classes from './addressBuilding.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AddressBuildingSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AddressBuildingSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AddressBuildingSvgMemo = memo(AddressBuildingSvg, areEqualShallow); +export { AddressBuildingSvgMemo as AddressBuildingSvg }; diff --git a/src/shared/components/Icons/AddressBuilding/addressBuilding.module.css b/src/shared/components/Icons/AddressBuilding/addressBuilding.module.css new file mode 100644 index 0000000..f4acda9 --- /dev/null +++ b/src/shared/components/Icons/AddressBuilding/addressBuilding.module.css @@ -0,0 +1,3 @@ +.addressBuildingBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/AddressBuilding/index.ts b/src/shared/components/Icons/AddressBuilding/index.ts new file mode 100644 index 0000000..6d4a195 --- /dev/null +++ b/src/shared/components/Icons/AddressBuilding/index.ts @@ -0,0 +1 @@ +export { AddressBuildingSvg } from './AddressBuilding'; diff --git a/src/shared/components/Icons/AirMover/AirMover.tsx b/src/shared/components/Icons/AirMover/AirMover.tsx new file mode 100644 index 0000000..c835872 --- /dev/null +++ b/src/shared/components/Icons/AirMover/AirMover.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import AirMover from '../../../Assets/air-mover.svg'; + +// Custom css +import classes from './airMover.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AirMoverSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AirMoverSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AirMoverSvgMemo = memo(AirMoverSvg, areEqualShallow); +export { AirMoverSvgMemo as AirMoverSvg }; diff --git a/src/shared/components/Icons/AirMover/airMover.module.css b/src/shared/components/Icons/AirMover/airMover.module.css new file mode 100644 index 0000000..b620679 --- /dev/null +++ b/src/shared/components/Icons/AirMover/airMover.module.css @@ -0,0 +1,3 @@ +.airMoverBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/AirMover/index.ts b/src/shared/components/Icons/AirMover/index.ts new file mode 100644 index 0000000..b0eb7ab --- /dev/null +++ b/src/shared/components/Icons/AirMover/index.ts @@ -0,0 +1 @@ +export { AirMoverSvg } from './AirMover'; diff --git a/src/shared/components/Icons/AirScrubber/AirScrubber.tsx b/src/shared/components/Icons/AirScrubber/AirScrubber.tsx new file mode 100644 index 0000000..93f1f0d --- /dev/null +++ b/src/shared/components/Icons/AirScrubber/AirScrubber.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import AirScrubber from '../../../Assets/air-scrubber.svg'; + +// Custom css +import classes from './airScrubber.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AirScrubberSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AirScrubberSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AirScrubberSvgMemo = memo(AirScrubberSvg, areEqualShallow); +export { AirScrubberSvgMemo as AirScrubberSvg }; diff --git a/src/shared/components/Icons/AirScrubber/airScrubber.module.css b/src/shared/components/Icons/AirScrubber/airScrubber.module.css new file mode 100644 index 0000000..0f77105 --- /dev/null +++ b/src/shared/components/Icons/AirScrubber/airScrubber.module.css @@ -0,0 +1,3 @@ +.airScrubberBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/AirScrubber/index.ts b/src/shared/components/Icons/AirScrubber/index.ts new file mode 100644 index 0000000..db44390 --- /dev/null +++ b/src/shared/components/Icons/AirScrubber/index.ts @@ -0,0 +1 @@ +export { AirScrubberSvg } from './AirScrubber'; diff --git a/src/shared/components/Icons/Apple/Apple.tsx b/src/shared/components/Icons/Apple/Apple.tsx new file mode 100644 index 0000000..c049f34 --- /dev/null +++ b/src/shared/components/Icons/Apple/Apple.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Apple from '../../../Assets/apple.svg'; + +// Custom css +import classes from './apple.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AppleSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AppleSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AppleSvgMemo = memo(AppleSvg, areEqualShallow); +export { AppleSvgMemo as AppleSvg }; diff --git a/src/shared/components/Icons/Apple/apple.module.css b/src/shared/components/Icons/Apple/apple.module.css new file mode 100644 index 0000000..570ab44 --- /dev/null +++ b/src/shared/components/Icons/Apple/apple.module.css @@ -0,0 +1,3 @@ +.appleBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Apple/index.ts b/src/shared/components/Icons/Apple/index.ts new file mode 100644 index 0000000..21a42d9 --- /dev/null +++ b/src/shared/components/Icons/Apple/index.ts @@ -0,0 +1 @@ +export { AppleSvg } from './Apple'; diff --git a/src/shared/components/Icons/ArrowLeft/ArrowLeft.tsx b/src/shared/components/Icons/ArrowLeft/ArrowLeft.tsx new file mode 100644 index 0000000..1a07e6b --- /dev/null +++ b/src/shared/components/Icons/ArrowLeft/ArrowLeft.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import ArrowLeft from "../../../Assets/arrow-left.svg"; + +// Custom css +import classes from "./arrowLeft.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ArrowLeftSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ArrowLeftSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ArrowLeftSvgMemo = memo(ArrowLeftSvg, areEqualShallow); +export { ArrowLeftSvgMemo as ArrowLeftSvg }; diff --git a/src/shared/components/Icons/ArrowLeft/arrowLeft.module.css b/src/shared/components/Icons/ArrowLeft/arrowLeft.module.css new file mode 100644 index 0000000..39dbd51 --- /dev/null +++ b/src/shared/components/Icons/ArrowLeft/arrowLeft.module.css @@ -0,0 +1,3 @@ +.arrowLeftBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ArrowLeft/index.ts b/src/shared/components/Icons/ArrowLeft/index.ts new file mode 100644 index 0000000..01b8507 --- /dev/null +++ b/src/shared/components/Icons/ArrowLeft/index.ts @@ -0,0 +1 @@ +export { ArrowLeftSvg } from "./ArrowLeft"; diff --git a/src/shared/components/Icons/BathRoom/BathRoom.tsx b/src/shared/components/Icons/BathRoom/BathRoom.tsx new file mode 100644 index 0000000..224dd22 --- /dev/null +++ b/src/shared/components/Icons/BathRoom/BathRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import BathRoom from "../../../Assets/bathroom.svg"; + +// Custom css +import classes from "./bathRoom.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const BathRoomSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +BathRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const BathRoomSvgMemo = memo(BathRoomSvg, areEqualShallow); +export { BathRoomSvgMemo as BathRoomSvg }; diff --git a/src/shared/components/Icons/BathRoom/bathRoom.module.css b/src/shared/components/Icons/BathRoom/bathRoom.module.css new file mode 100644 index 0000000..ea56406 --- /dev/null +++ b/src/shared/components/Icons/BathRoom/bathRoom.module.css @@ -0,0 +1,3 @@ +.bathRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/BathRoom/index.ts b/src/shared/components/Icons/BathRoom/index.ts new file mode 100644 index 0000000..bd96824 --- /dev/null +++ b/src/shared/components/Icons/BathRoom/index.ts @@ -0,0 +1 @@ +export { BathRoomSvg } from "./BathRoom"; diff --git a/src/shared/components/Icons/BedRoom/BedRoom.tsx b/src/shared/components/Icons/BedRoom/BedRoom.tsx new file mode 100644 index 0000000..1b0825a --- /dev/null +++ b/src/shared/components/Icons/BedRoom/BedRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import BedRoom from "../../../Assets/bedroom.svg"; + +// Custom css +import classes from "./bedRoom.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const BedRoomSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +BedRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const BedRoomSvgMemo = memo(BedRoomSvg, areEqualShallow); +export { BedRoomSvgMemo as BedRoomSvg }; diff --git a/src/shared/components/Icons/BedRoom/bedRoom.module.css b/src/shared/components/Icons/BedRoom/bedRoom.module.css new file mode 100644 index 0000000..fa58d0b --- /dev/null +++ b/src/shared/components/Icons/BedRoom/bedRoom.module.css @@ -0,0 +1,3 @@ +.bedRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/BedRoom/index.ts b/src/shared/components/Icons/BedRoom/index.ts new file mode 100644 index 0000000..0e701ea --- /dev/null +++ b/src/shared/components/Icons/BedRoom/index.ts @@ -0,0 +1 @@ +export { BedRoomSvg } from "./BedRoom"; diff --git a/src/shared/components/Icons/Bookmark/Bookmark.tsx b/src/shared/components/Icons/Bookmark/Bookmark.tsx new file mode 100644 index 0000000..c38c9dc --- /dev/null +++ b/src/shared/components/Icons/Bookmark/Bookmark.tsx @@ -0,0 +1,74 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Bookmark from '../../../Assets/bookmark.svg'; +import BookmarkPurple from '../../../Assets/bookmark-purple.svg'; +import BookmarkPhoto from '../../../Assets/bookmark-photo.svg'; +import BookmarkedPhoto from '../../../Assets/bookmarked-photo.svg'; +import BookmarkOutlinePurple from '../../../Assets/bookmark-outline-purple.svg'; +// Custom css +import classes from './bookmark.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const BookmarkSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'bookmarkPhoto': + return ( + + ); + case 'bookmarkedPhoto': + return ( + + ); + case 'purple': + return ( + + ); + case 'outlinepurple': + return ( + + ); + default: + return ( + + ); + } +}; + +BookmarkSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 'default', + onClick: undefined, + onKeyUp: undefined, +}; + +const BookmarkSvgMemo = memo(BookmarkSvg, areEqualShallow); +export { BookmarkSvgMemo as BookmarkSvg }; diff --git a/src/shared/components/Icons/Bookmark/bookmark.module.css b/src/shared/components/Icons/Bookmark/bookmark.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Bookmark/bookmark.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Bookmark/index.ts b/src/shared/components/Icons/Bookmark/index.ts new file mode 100644 index 0000000..d6c3e37 --- /dev/null +++ b/src/shared/components/Icons/Bookmark/index.ts @@ -0,0 +1 @@ +export { BookmarkSvg } from './Bookmark'; diff --git a/src/shared/components/Icons/CaretDown/CaretDown.tsx b/src/shared/components/Icons/CaretDown/CaretDown.tsx new file mode 100644 index 0000000..87d1fe9 --- /dev/null +++ b/src/shared/components/Icons/CaretDown/CaretDown.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import CaretDown from "../../../Assets/caret-down.svg"; + +// Custom css +import classes from "./caretDown.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CaretDownSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +CaretDownSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CaretDownSvgMemo = memo(CaretDownSvg, areEqualShallow); +export { CaretDownSvgMemo as CaretDownSvg }; diff --git a/src/shared/components/Icons/CaretDown/caretDown.module.css b/src/shared/components/Icons/CaretDown/caretDown.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/CaretDown/caretDown.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CaretDown/index.ts b/src/shared/components/Icons/CaretDown/index.ts new file mode 100644 index 0000000..077ee28 --- /dev/null +++ b/src/shared/components/Icons/CaretDown/index.ts @@ -0,0 +1 @@ +export { CaretDownSvg } from "./CaretDown"; diff --git a/src/shared/components/Icons/CaretUp/CaretUp.tsx b/src/shared/components/Icons/CaretUp/CaretUp.tsx new file mode 100644 index 0000000..1063d1d --- /dev/null +++ b/src/shared/components/Icons/CaretUp/CaretUp.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import CaretUp from "../../../Assets/caret-up.svg"; + +// Custom css +import classes from "./caretUp.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CaretUpSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +CaretUpSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CaretUpSvgMemo = memo(CaretUpSvg, areEqualShallow); +export { CaretUpSvgMemo as CaretUpSvg }; diff --git a/src/shared/components/Icons/CaretUp/caretUp.module.css b/src/shared/components/Icons/CaretUp/caretUp.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/CaretUp/caretUp.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CaretUp/index.ts b/src/shared/components/Icons/CaretUp/index.ts new file mode 100644 index 0000000..42f5881 --- /dev/null +++ b/src/shared/components/Icons/CaretUp/index.ts @@ -0,0 +1 @@ +export { CaretUpSvg } from "./CaretUp"; diff --git a/src/shared/components/Icons/CarouselController/CarouselController.tsx b/src/shared/components/Icons/CarouselController/CarouselController.tsx new file mode 100644 index 0000000..d3e0329 --- /dev/null +++ b/src/shared/components/Icons/CarouselController/CarouselController.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Next from '../../../Assets/carousel-next.svg'; +import Prev from '../../../Assets/carousel-prev.svg'; + +// Custom css +import classes from './carouselController.module.css'; + +interface Props { + className?: string; + id?: string; + iconType: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CarouselControllerSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'next': + return ; + case 'prev': + return ; + default: + return null; + } +}; + +CarouselControllerSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CarouselControllerSvgMemo = memo(CarouselControllerSvg, areEqualShallow); + +export { CarouselControllerSvgMemo as CarouselControllerSvg }; diff --git a/src/shared/components/Icons/CarouselController/carouselController.module.css b/src/shared/components/Icons/CarouselController/carouselController.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/CarouselController/carouselController.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CarouselController/index.ts b/src/shared/components/Icons/CarouselController/index.ts new file mode 100644 index 0000000..d11bbfc --- /dev/null +++ b/src/shared/components/Icons/CarouselController/index.ts @@ -0,0 +1 @@ +export { CarouselControllerSvg } from './CarouselController'; diff --git a/src/shared/components/Icons/Checkbox/Checkbox.tsx b/src/shared/components/Icons/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..cac7a68 --- /dev/null +++ b/src/shared/components/Icons/Checkbox/Checkbox.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Checkbox from '../../../Assets/checkbox.svg'; + +// Custom css +import classes from './checkBox.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CheckboxSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CheckboxSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CheckboxSvgMemo = memo(CheckboxSvg, areEqualShallow); +export { CheckboxSvgMemo as CheckboxSvg }; diff --git a/src/shared/components/Icons/Checkbox/checkBox.module.css b/src/shared/components/Icons/Checkbox/checkBox.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Checkbox/checkBox.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Checkbox/index.ts b/src/shared/components/Icons/Checkbox/index.ts new file mode 100644 index 0000000..086e4e8 --- /dev/null +++ b/src/shared/components/Icons/Checkbox/index.ts @@ -0,0 +1 @@ +export { CheckboxSvg } from './Checkbox'; diff --git a/src/shared/components/Icons/CheckedMark/CheckedMark.tsx b/src/shared/components/Icons/CheckedMark/CheckedMark.tsx new file mode 100644 index 0000000..c4524d3 --- /dev/null +++ b/src/shared/components/Icons/CheckedMark/CheckedMark.tsx @@ -0,0 +1,50 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CheckedMark from '../../../Assets/checked-mark.svg'; +import CheckedMarkPurple from '../../../Assets/checked-mark-purple-bg.svg'; + +// Custom css +import classes from './checkedMark.module.css'; + +interface Props { + className?: string; + id?: string; + type?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CheckedMarkSvg = ({ className = '', id, type, onClick, onKeyUp }: Props) => { + switch (type) { + case 'purple-bg': + return ( + + ); + default: + return ( + + ); + } +}; + +CheckedMarkSvg.defaultProps = { + className: undefined, + id: undefined, + type: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CheckedMarkSvgMemo = memo(CheckedMarkSvg, areEqualShallow); +export { CheckedMarkSvgMemo as CheckedMarkSvg }; diff --git a/src/shared/components/Icons/CheckedMark/checkedMark.module.css b/src/shared/components/Icons/CheckedMark/checkedMark.module.css new file mode 100644 index 0000000..5fa642e --- /dev/null +++ b/src/shared/components/Icons/CheckedMark/checkedMark.module.css @@ -0,0 +1,3 @@ +.checkedMarkBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CheckedMark/index.ts b/src/shared/components/Icons/CheckedMark/index.ts new file mode 100644 index 0000000..b0193f2 --- /dev/null +++ b/src/shared/components/Icons/CheckedMark/index.ts @@ -0,0 +1 @@ +export { CheckedMarkSvg } from './CheckedMark'; diff --git a/src/shared/components/Icons/ChevronIcons/ChevronIcons.tsx b/src/shared/components/Icons/ChevronIcons/ChevronIcons.tsx new file mode 100644 index 0000000..cfd5ced --- /dev/null +++ b/src/shared/components/Icons/ChevronIcons/ChevronIcons.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Next from '../../../Assets/chevron-next.svg'; +import Previous from '../../../Assets/chevron-previous.svg'; + +// Custom css +import classes from './chevronIcons.module.css'; + +interface Props { + className?: string; + id?: string; + iconType: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ChevronIconsSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'next': + return ; + case 'previous': + return ( + + ); + default: + return null; + } +}; + +ChevronIconsSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ChevronIconsSvgMemo = memo(ChevronIconsSvg, areEqualShallow); +export { ChevronIconsSvgMemo as ChevronIconsSvg }; diff --git a/src/shared/components/Icons/ChevronIcons/chevronIcons.module.css b/src/shared/components/Icons/ChevronIcons/chevronIcons.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/ChevronIcons/chevronIcons.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ChevronIcons/index.ts b/src/shared/components/Icons/ChevronIcons/index.ts new file mode 100644 index 0000000..ab325bc --- /dev/null +++ b/src/shared/components/Icons/ChevronIcons/index.ts @@ -0,0 +1 @@ +export { ChevronIconsSvg } from './ChevronIcons'; diff --git a/src/shared/components/Icons/Circle/Circle.tsx b/src/shared/components/Icons/Circle/Circle.tsx new file mode 100644 index 0000000..52fa70e --- /dev/null +++ b/src/shared/components/Icons/Circle/Circle.tsx @@ -0,0 +1,33 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Circle from '../../../Assets/circle.svg'; +import Circle16 from '../../../Assets/circle-16.svg'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CircleSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '16': + return ; + default: + return ; + } +}; + +CircleSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CircleSvgMemo = memo(CircleSvg, areEqualShallow); +export { CircleSvgMemo as CircleSvg }; diff --git a/src/shared/components/Icons/Circle/index.ts b/src/shared/components/Icons/Circle/index.ts new file mode 100644 index 0000000..8fd9808 --- /dev/null +++ b/src/shared/components/Icons/Circle/index.ts @@ -0,0 +1 @@ +export { CircleSvg } from './Circle'; diff --git a/src/shared/components/Icons/Close/Close.tsx b/src/shared/components/Icons/Close/Close.tsx new file mode 100644 index 0000000..ac1014c --- /dev/null +++ b/src/shared/components/Icons/Close/Close.tsx @@ -0,0 +1,40 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Close from '../../../Assets/close.svg'; +import CloseSmall from '../../../Assets/close-sm.svg'; + +// Custom css +import classes from './close.module.css'; + +interface Props { + className?: string; + id?: string; + type?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CloseSvg = ({ className = '', id, type, onClick, onKeyUp }: Props) => { + switch (type) { + case 'plain-sm': + return ( + + ); + default: + return ( + + ); + } +}; + +CloseSvg.defaultProps = { + className: undefined, + id: undefined, + type: 'default-circle', + onClick: undefined, + onKeyUp: undefined, +}; + +const CloseSvgMemo = memo(CloseSvg, areEqualShallow); +export { CloseSvgMemo as CloseSvg }; diff --git a/src/shared/components/Icons/Close/close.module.css b/src/shared/components/Icons/Close/close.module.css new file mode 100644 index 0000000..2053825 --- /dev/null +++ b/src/shared/components/Icons/Close/close.module.css @@ -0,0 +1,3 @@ +.closeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Close/index.ts b/src/shared/components/Icons/Close/index.ts new file mode 100644 index 0000000..a53ac22 --- /dev/null +++ b/src/shared/components/Icons/Close/index.ts @@ -0,0 +1 @@ +export { CloseSvg } from './Close'; diff --git a/src/shared/components/Icons/CloseCircle/CloseCircle.tsx b/src/shared/components/Icons/CloseCircle/CloseCircle.tsx new file mode 100644 index 0000000..0462703 --- /dev/null +++ b/src/shared/components/Icons/CloseCircle/CloseCircle.tsx @@ -0,0 +1,32 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import CloseCircle from "../../../Assets/closecircle.svg"; + +// Custom css +import classes from "./closeCircle.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CloseCircleSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +CloseCircleSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CloseCircleSvgMemo = memo(CloseCircleSvg, areEqualShallow); +export { CloseCircleSvgMemo as CloseCircleSvg }; diff --git a/src/shared/components/Icons/CloseCircle/closeCircle.module.css b/src/shared/components/Icons/CloseCircle/closeCircle.module.css new file mode 100644 index 0000000..c247c28 --- /dev/null +++ b/src/shared/components/Icons/CloseCircle/closeCircle.module.css @@ -0,0 +1,3 @@ +.closeCircleBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CloseCircle/index.ts b/src/shared/components/Icons/CloseCircle/index.ts new file mode 100644 index 0000000..c70d88e --- /dev/null +++ b/src/shared/components/Icons/CloseCircle/index.ts @@ -0,0 +1 @@ +export { CloseCircleSvg } from "./CloseCircle"; diff --git a/src/shared/components/Icons/Commercial/Commercial.tsx b/src/shared/components/Icons/Commercial/Commercial.tsx new file mode 100644 index 0000000..813751d --- /dev/null +++ b/src/shared/components/Icons/Commercial/Commercial.tsx @@ -0,0 +1,28 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Commercial from '../../../Assets/commercial.svg'; + +// Custom css +import classes from './commercial.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CommercialSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CommercialSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CommercialSvgMemo = memo(CommercialSvg, areEqualShallow); +export { CommercialSvgMemo as CommercialSvg }; diff --git a/src/shared/components/Icons/Commercial/commercial.module.css b/src/shared/components/Icons/Commercial/commercial.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Commercial/commercial.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Commercial/index.ts b/src/shared/components/Icons/Commercial/index.ts new file mode 100644 index 0000000..b1c4547 --- /dev/null +++ b/src/shared/components/Icons/Commercial/index.ts @@ -0,0 +1 @@ +export { CommercialSvg } from './Commercial'; diff --git a/src/shared/components/Icons/CompanyArrow/CompanyArrow.tsx b/src/shared/components/Icons/CompanyArrow/CompanyArrow.tsx new file mode 100644 index 0000000..bf1c030 --- /dev/null +++ b/src/shared/components/Icons/CompanyArrow/CompanyArrow.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CompanyArrow from '../../../Assets/company-arrow.svg'; + +// Custom css +import classes from './companyArrow.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CompanyArrowSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CompanyArrowSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CompanyArrowSvgMemo = memo(CompanyArrowSvg, areEqualShallow); +export { CompanyArrowSvgMemo as CompanyArrowSvg }; diff --git a/src/shared/components/Icons/CompanyArrow/companyArrow.module.css b/src/shared/components/Icons/CompanyArrow/companyArrow.module.css new file mode 100644 index 0000000..3e8d844 --- /dev/null +++ b/src/shared/components/Icons/CompanyArrow/companyArrow.module.css @@ -0,0 +1,3 @@ +.companyArrowBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CompanyArrow/index.ts b/src/shared/components/Icons/CompanyArrow/index.ts new file mode 100644 index 0000000..23a6ef1 --- /dev/null +++ b/src/shared/components/Icons/CompanyArrow/index.ts @@ -0,0 +1 @@ +export { CompanyArrowSvg } from './CompanyArrow'; diff --git a/src/shared/components/Icons/ConfirmChecked/ConfirmChecked.tsx b/src/shared/components/Icons/ConfirmChecked/ConfirmChecked.tsx new file mode 100644 index 0000000..77f49dc --- /dev/null +++ b/src/shared/components/Icons/ConfirmChecked/ConfirmChecked.tsx @@ -0,0 +1,59 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import ConfirmChecked from '../../../Assets/confirm.svg'; +import ConfirmCheckedSm from '../../../Assets/confirm-sm.svg'; +import ConfirmCheckedPurple from '../../../Assets/confirm-purple.svg'; + +// Custom css +import classes from './confirmChecked.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ConfirmCheckedSvg = ({ className = '', id, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 3: + return ( + + ); + case 2: + return ( + + ); + default: + return ( + + ); + } +}; + +ConfirmCheckedSvg.defaultProps = { + className: undefined, + id: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const ConfirmCheckedSvgMemo = memo(ConfirmCheckedSvg, areEqualShallow); +export { ConfirmCheckedSvgMemo as ConfirmCheckedSvg }; diff --git a/src/shared/components/Icons/ConfirmChecked/confirmChecked.module.css b/src/shared/components/Icons/ConfirmChecked/confirmChecked.module.css new file mode 100644 index 0000000..9dc61ec --- /dev/null +++ b/src/shared/components/Icons/ConfirmChecked/confirmChecked.module.css @@ -0,0 +1,3 @@ +.confirmCheckedBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ConfirmChecked/index.ts b/src/shared/components/Icons/ConfirmChecked/index.ts new file mode 100644 index 0000000..b1b9528 --- /dev/null +++ b/src/shared/components/Icons/ConfirmChecked/index.ts @@ -0,0 +1 @@ +export { ConfirmCheckedSvg } from './ConfirmChecked'; diff --git a/src/shared/components/Icons/Copy/Copy.tsx b/src/shared/components/Icons/Copy/Copy.tsx new file mode 100644 index 0000000..fd2414c --- /dev/null +++ b/src/shared/components/Icons/Copy/Copy.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Copy from '../../../Assets/copy.svg'; + +// Custom css +import classes from './copy.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CopySvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CopySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CopySvgMemo = memo(CopySvg, areEqualShallow); +export { CopySvgMemo as CopySvg }; diff --git a/src/shared/components/Icons/Copy/copy.module.css b/src/shared/components/Icons/Copy/copy.module.css new file mode 100644 index 0000000..40e3d95 --- /dev/null +++ b/src/shared/components/Icons/Copy/copy.module.css @@ -0,0 +1,3 @@ +.copyBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Copy/index.ts b/src/shared/components/Icons/Copy/index.ts new file mode 100644 index 0000000..8c9e7ab --- /dev/null +++ b/src/shared/components/Icons/Copy/index.ts @@ -0,0 +1 @@ +export { CopySvg } from './Copy'; diff --git a/src/shared/components/Icons/CountryFlag/CountryFlag.tsx b/src/shared/components/Icons/CountryFlag/CountryFlag.tsx new file mode 100644 index 0000000..ae74af2 --- /dev/null +++ b/src/shared/components/Icons/CountryFlag/CountryFlag.tsx @@ -0,0 +1,43 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CanadaFlag from '../../../Assets/canadaflag.svg'; +import UnitedStatesFlag from '../../../Assets/unitedstatesflag.svg'; +import UnitedKingdomFlag from '../../../Assets/unitedkingdomflag.svg'; +import NewZealandFlag from '../../../Assets/newzealandflag.svg'; +import AustraliaFlag from '../../../Assets/australiaflag.svg'; + +// Custom css +import classes from './countryFlag.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; +} + +const CountryFlagSvg = ({ className = '', id, svgItem }: Props) => { + switch (svgItem) { + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + + default: + return ; + } +}; + +CountryFlagSvg.defaultProps = { + svgItem: 1, + className: undefined, + id: undefined, +}; + +const CountryFlagSvgMemo = memo(CountryFlagSvg, areEqualShallow); + +export { CountryFlagSvgMemo as CountryFlagSvg }; diff --git a/src/shared/components/Icons/CountryFlag/countryFlag.module.css b/src/shared/components/Icons/CountryFlag/countryFlag.module.css new file mode 100644 index 0000000..235a967 --- /dev/null +++ b/src/shared/components/Icons/CountryFlag/countryFlag.module.css @@ -0,0 +1,3 @@ +.flagIconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CountryFlag/index.ts b/src/shared/components/Icons/CountryFlag/index.ts new file mode 100644 index 0000000..4537781 --- /dev/null +++ b/src/shared/components/Icons/CountryFlag/index.ts @@ -0,0 +1 @@ +export { CountryFlagSvg } from './CountryFlag'; diff --git a/src/shared/components/Icons/Crew/Crew.tsx b/src/shared/components/Icons/Crew/Crew.tsx new file mode 100644 index 0000000..881bb2f --- /dev/null +++ b/src/shared/components/Icons/Crew/Crew.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Crew from '../../../Assets/crew.svg'; + +// Custom css +import classes from './crew.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CrewSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CrewSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CrewSvgMemo = memo(CrewSvg, areEqualShallow); +export { CrewSvgMemo as CrewSvg }; diff --git a/src/shared/components/Icons/Crew/crew.module.css b/src/shared/components/Icons/Crew/crew.module.css new file mode 100644 index 0000000..11af697 --- /dev/null +++ b/src/shared/components/Icons/Crew/crew.module.css @@ -0,0 +1,3 @@ +.crewBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Crew/index.ts b/src/shared/components/Icons/Crew/index.ts new file mode 100644 index 0000000..4016d71 --- /dev/null +++ b/src/shared/components/Icons/Crew/index.ts @@ -0,0 +1 @@ +export { CrewSvg } from './Crew'; diff --git a/src/shared/components/Icons/Cube/Cube.tsx b/src/shared/components/Icons/Cube/Cube.tsx new file mode 100644 index 0000000..00f0e91 --- /dev/null +++ b/src/shared/components/Icons/Cube/Cube.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Cube from '../../../Assets/cube.svg'; + +// Custom css +import classes from './cube.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CubeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CubeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CubeSvgMemo = memo(CubeSvg, areEqualShallow); +export { CubeSvgMemo as CubeSvg }; diff --git a/src/shared/components/Icons/Cube/cube.module.css b/src/shared/components/Icons/Cube/cube.module.css new file mode 100644 index 0000000..a3c502a --- /dev/null +++ b/src/shared/components/Icons/Cube/cube.module.css @@ -0,0 +1,3 @@ +.cubeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Cube/index.ts b/src/shared/components/Icons/Cube/index.ts new file mode 100644 index 0000000..19fe360 --- /dev/null +++ b/src/shared/components/Icons/Cube/index.ts @@ -0,0 +1 @@ +export { CubeSvg } from './Cube'; diff --git a/src/shared/components/Icons/CubePlus/CubePlus.tsx b/src/shared/components/Icons/CubePlus/CubePlus.tsx new file mode 100644 index 0000000..cb7683b --- /dev/null +++ b/src/shared/components/Icons/CubePlus/CubePlus.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CubePlus from '../../../Assets/cube-plus.svg'; + +// Custom css +import classes from './cubePlus.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CubePlusSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CubePlusSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CubePlusSvgMemo = memo(CubePlusSvg, areEqualShallow); +export { CubePlusSvgMemo as CubePlusSvg }; diff --git a/src/shared/components/Icons/CubePlus/cubePlus.module.css b/src/shared/components/Icons/CubePlus/cubePlus.module.css new file mode 100644 index 0000000..b4e9426 --- /dev/null +++ b/src/shared/components/Icons/CubePlus/cubePlus.module.css @@ -0,0 +1,3 @@ +.cubePlusBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CubePlus/index.ts b/src/shared/components/Icons/CubePlus/index.ts new file mode 100644 index 0000000..6eae583 --- /dev/null +++ b/src/shared/components/Icons/CubePlus/index.ts @@ -0,0 +1 @@ +export { CubePlusSvg } from './CubePlus'; diff --git a/src/shared/components/Icons/CubePlusLarge/CubePlusLarge.tsx b/src/shared/components/Icons/CubePlusLarge/CubePlusLarge.tsx new file mode 100644 index 0000000..feeb400 --- /dev/null +++ b/src/shared/components/Icons/CubePlusLarge/CubePlusLarge.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CubePlusLg from '../../../Assets/cube-plus-lg.svg'; + +// Custom css +import classes from './cubePlusLg.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CubePlusLgSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CubePlusLgSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CubePlusLgSvgMemo = memo(CubePlusLgSvg, areEqualShallow); +export { CubePlusLgSvgMemo as CubePlusLgSvg }; diff --git a/src/shared/components/Icons/CubePlusLarge/cubePlusLg.module.css b/src/shared/components/Icons/CubePlusLarge/cubePlusLg.module.css new file mode 100644 index 0000000..fa6c8f6 --- /dev/null +++ b/src/shared/components/Icons/CubePlusLarge/cubePlusLg.module.css @@ -0,0 +1,3 @@ +.cubePlusLgBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/CubePlusLarge/index.ts b/src/shared/components/Icons/CubePlusLarge/index.ts new file mode 100644 index 0000000..62396d3 --- /dev/null +++ b/src/shared/components/Icons/CubePlusLarge/index.ts @@ -0,0 +1 @@ +export { CubePlusLgSvg } from './CubePlusLarge'; diff --git a/src/shared/components/Icons/CustomRoom/CustomRoom.tsx b/src/shared/components/Icons/CustomRoom/CustomRoom.tsx new file mode 100644 index 0000000..9a8d8cc --- /dev/null +++ b/src/shared/components/Icons/CustomRoom/CustomRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import CustomRoom from '../../../Assets/custom-room.svg'; + +// Custom css +import classes from './customRoom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CustomRoomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CustomRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CustomRoomSvgMemo = memo(CustomRoomSvg, areEqualShallow); +export { CustomRoomSvgMemo as CustomRoomSvg }; diff --git a/src/shared/components/Icons/CustomRoom/customRoom.module.css b/src/shared/components/Icons/CustomRoom/customRoom.module.css new file mode 100644 index 0000000..25ba62e --- /dev/null +++ b/src/shared/components/Icons/CustomRoom/customRoom.module.css @@ -0,0 +1,4 @@ +.customRoomBase { + cursor: auto; + pointer-events: none; +} diff --git a/src/shared/components/Icons/CustomRoom/index.ts b/src/shared/components/Icons/CustomRoom/index.ts new file mode 100644 index 0000000..43b7b81 --- /dev/null +++ b/src/shared/components/Icons/CustomRoom/index.ts @@ -0,0 +1 @@ +export { CustomRoomSvg } from './CustomRoom'; diff --git a/src/shared/components/Icons/DamageIcon/DamageIcon.tsx b/src/shared/components/Icons/DamageIcon/DamageIcon.tsx new file mode 100644 index 0000000..759adf1 --- /dev/null +++ b/src/shared/components/Icons/DamageIcon/DamageIcon.tsx @@ -0,0 +1,107 @@ +import React, { memo, useEffect, useState } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { + AppliancesSvg, + CeilingSvg, + ElectricalSvg, + ExteriorDamageSvg, + FlooringSvg, + PlumbingSvg, + RoofingSvg, + StructuralSvg, + WallsSvg, + WaterSvg, + FireSvg, + ImpactSvg, + MoldSvg, + SmokeSvg, + AsbestosSvg, + InspectionSvg, + NaturalSvg, + CustomSvg, + AddCustomSvg, + CarpentrySvg, + CleaningSvg, + MiscSvg, + ProtectionSvg, +} from '../DamageTypes'; + +interface Props { + type: string; + className?: string; + events?: any; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const getIcon = (type, className, onClick, onKeyUp) => { + const icons = { + // damaged material icons + appliances: , + appliances32: , + ceiling: , + ceiling32: , + electrical: , + electrical32: , + exterior: , + exterior32: , + flooring: , + flooring32: , + plumbing: , + plumbing32: , + roofing: , + roofing32: , + structural: , + structural32: , + walls: , + walls32: , + + // property damage icons + water: , + fire: , + impact: , + mold: , + smoke: , + asbestos: , + inspection: , + natural: , + custom: , + addcustom: , + carpentry: , + cleaning: , + 'misc.': , + protection: , + // mitigation is supposed to use the water svg + mitigation: , + }; + + // return null to avoid errors in case if the icon type is not present in the icons list + return icons[type] || null; +}; + +const DamageIcon = ({ className, onClick, onKeyUp, type }: Props) => { + const [icon, setIcon] = useState(null); + + useEffect(() => { + if (type) { + // Remove all white space from the string, with the regex + const iconType = type.toLocaleLowerCase().replace(/\s+/g, ''); + + // set the icon based on icon type change, useful for conditional icon renderings + setIcon(getIcon(iconType, className, onClick, onKeyUp)); + } + }, [type]); + + return icon; +}; + +DamageIcon.defaultProps = { + className: undefined, + events: undefined, +}; + +const DamageIconMemo = memo(DamageIcon, areEqual); + +export { DamageIconMemo as DamageIcon }; diff --git a/src/shared/components/Icons/DamageIcon/index.ts b/src/shared/components/Icons/DamageIcon/index.ts new file mode 100644 index 0000000..e0f5c69 --- /dev/null +++ b/src/shared/components/Icons/DamageIcon/index.ts @@ -0,0 +1 @@ +export { DamageIcon } from './DamageIcon'; diff --git a/src/shared/components/Icons/DamageTypes/AddCustom/AddCustom.tsx b/src/shared/components/Icons/DamageTypes/AddCustom/AddCustom.tsx new file mode 100644 index 0000000..699d6d8 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/AddCustom/AddCustom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Custom from '../../../../Assets/custom-damage-add.svg'; + +// Custom css +import classes from './addCustom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AddCustomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AddCustomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AddCustomSvgMemo = memo(AddCustomSvg, areEqualShallow); +export { AddCustomSvgMemo as AddCustomSvg }; diff --git a/src/shared/components/Icons/DamageTypes/AddCustom/addCustom.module.css b/src/shared/components/Icons/DamageTypes/AddCustom/addCustom.module.css new file mode 100644 index 0000000..863ea3b --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/AddCustom/addCustom.module.css @@ -0,0 +1,4 @@ +.customBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/AddCustom/index.ts b/src/shared/components/Icons/DamageTypes/AddCustom/index.ts new file mode 100644 index 0000000..3a5f680 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/AddCustom/index.ts @@ -0,0 +1 @@ +export { AddCustomSvg } from './AddCustom'; diff --git a/src/shared/components/Icons/DamageTypes/Appliances/Appliances.tsx b/src/shared/components/Icons/DamageTypes/Appliances/Appliances.tsx new file mode 100644 index 0000000..72f558a --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Appliances/Appliances.tsx @@ -0,0 +1,49 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Appliances from '../../../../Assets/appliances.svg'; +import Appliances32 from '../../../../Assets/appliances-sm.svg'; + +// Custom css +import classes from './appliances.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AppliancesSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +AppliancesSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AppliancesSvgMemo = memo(AppliancesSvg, areEqualShallow); +export { AppliancesSvgMemo as AppliancesSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Appliances/appliances.module.css b/src/shared/components/Icons/DamageTypes/Appliances/appliances.module.css new file mode 100644 index 0000000..dc49d69 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Appliances/appliances.module.css @@ -0,0 +1,4 @@ +.appliancesBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Appliances/index.ts b/src/shared/components/Icons/DamageTypes/Appliances/index.ts new file mode 100644 index 0000000..3a806c1 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Appliances/index.ts @@ -0,0 +1 @@ +export { AppliancesSvg } from './Appliances'; diff --git a/src/shared/components/Icons/DamageTypes/Asbestos/Asbestos.tsx b/src/shared/components/Icons/DamageTypes/Asbestos/Asbestos.tsx new file mode 100644 index 0000000..37ed1c3 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Asbestos/Asbestos.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Asbestos from '../../../../Assets/asbestos.svg'; + +// Custom css +import classes from './asbestos.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const AsbestosSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +AsbestosSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const AsbestosSvgMemo = memo(AsbestosSvg, areEqualShallow); +export { AsbestosSvgMemo as AsbestosSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Asbestos/asbestos.module.css b/src/shared/components/Icons/DamageTypes/Asbestos/asbestos.module.css new file mode 100644 index 0000000..446358a --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Asbestos/asbestos.module.css @@ -0,0 +1,4 @@ +.asbestosBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Asbestos/index.ts b/src/shared/components/Icons/DamageTypes/Asbestos/index.ts new file mode 100644 index 0000000..7fca228 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Asbestos/index.ts @@ -0,0 +1 @@ +export { AsbestosSvg } from './Asbestos'; diff --git a/src/shared/components/Icons/DamageTypes/Carpentry/Carpentry.tsx b/src/shared/components/Icons/DamageTypes/Carpentry/Carpentry.tsx new file mode 100644 index 0000000..74ec9b8 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Carpentry/Carpentry.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Carpentry from '../../../../Assets/carpentry.svg'; + +// Custom css +import classes from './carpentry.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CarpentrySvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CarpentrySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CarpentrySvgMemo = memo(CarpentrySvg, areEqualShallow); +export { CarpentrySvgMemo as CarpentrySvg }; diff --git a/src/shared/components/Icons/DamageTypes/Carpentry/carpentry.module.css b/src/shared/components/Icons/DamageTypes/Carpentry/carpentry.module.css new file mode 100644 index 0000000..bfdeca4 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Carpentry/carpentry.module.css @@ -0,0 +1,3 @@ +.carpentryBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Carpentry/index.ts b/src/shared/components/Icons/DamageTypes/Carpentry/index.ts new file mode 100644 index 0000000..c315f02 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Carpentry/index.ts @@ -0,0 +1 @@ +export { CarpentrySvg } from './Carpentry'; diff --git a/src/shared/components/Icons/DamageTypes/Ceiling/Ceiling.tsx b/src/shared/components/Icons/DamageTypes/Ceiling/Ceiling.tsx new file mode 100644 index 0000000..7611526 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Ceiling/Ceiling.tsx @@ -0,0 +1,44 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Ceiling from '../../../../Assets/ceiling.svg'; +import Ceiling32 from '../../../../Assets/ceiling-sm.svg'; + +// Custom css +import classes from './ceiling.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CeilingSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +CeilingSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CeilingSvgMemo = memo(CeilingSvg, areEqualShallow); +export { CeilingSvgMemo as CeilingSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Ceiling/ceiling.module.css b/src/shared/components/Icons/DamageTypes/Ceiling/ceiling.module.css new file mode 100644 index 0000000..a40629d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Ceiling/ceiling.module.css @@ -0,0 +1,4 @@ +.ceilingBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Ceiling/index.ts b/src/shared/components/Icons/DamageTypes/Ceiling/index.ts new file mode 100644 index 0000000..7070dbb --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Ceiling/index.ts @@ -0,0 +1 @@ +export { CeilingSvg } from './Ceiling'; diff --git a/src/shared/components/Icons/DamageTypes/Cleaning/Cleaning.tsx b/src/shared/components/Icons/DamageTypes/Cleaning/Cleaning.tsx new file mode 100644 index 0000000..8f60cd1 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Cleaning/Cleaning.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Cleaning from '../../../../Assets/cleaning.svg'; + +// Custom css +import classes from './cleaning.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CleaningSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CleaningSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CleaningSvgMemo = memo(CleaningSvg, areEqualShallow); +export { CleaningSvgMemo as CleaningSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Cleaning/cleaning.module.css b/src/shared/components/Icons/DamageTypes/Cleaning/cleaning.module.css new file mode 100644 index 0000000..7b8178f --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Cleaning/cleaning.module.css @@ -0,0 +1,3 @@ +.cleaningBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Cleaning/index.ts b/src/shared/components/Icons/DamageTypes/Cleaning/index.ts new file mode 100644 index 0000000..dc973a6 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Cleaning/index.ts @@ -0,0 +1 @@ +export { CleaningSvg } from './Cleaning'; diff --git a/src/shared/components/Icons/DamageTypes/Custom/Custom.tsx b/src/shared/components/Icons/DamageTypes/Custom/Custom.tsx new file mode 100644 index 0000000..3fea90e --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Custom/Custom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Custom from '../../../../Assets/custom-damage-type.svg'; + +// Custom css +import classes from './custom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const CustomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +CustomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const CustomSvgMemo = memo(CustomSvg, areEqualShallow); +export { CustomSvgMemo as CustomSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Custom/custom.module.css b/src/shared/components/Icons/DamageTypes/Custom/custom.module.css new file mode 100644 index 0000000..889a5fa --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Custom/custom.module.css @@ -0,0 +1,5 @@ +.customBase { + cursor: pointer; + pointer-events: none; + } + \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Custom/index.ts b/src/shared/components/Icons/DamageTypes/Custom/index.ts new file mode 100644 index 0000000..4d2f6f5 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Custom/index.ts @@ -0,0 +1 @@ +export { CustomSvg } from './Custom'; diff --git a/src/shared/components/Icons/DamageTypes/Electrical/Electrical.tsx b/src/shared/components/Icons/DamageTypes/Electrical/Electrical.tsx new file mode 100644 index 0000000..49d100d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Electrical/Electrical.tsx @@ -0,0 +1,49 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Electrical from '../../../../Assets/electrical.svg'; +import Electrical32 from '../../../../Assets/electrical-32.svg'; + +// Custom css +import classes from './electrical.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ElectricalSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +ElectricalSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ElectricalSvgMemo = memo(ElectricalSvg, areEqualShallow); +export { ElectricalSvgMemo as ElectricalSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Electrical/electrical.module.css b/src/shared/components/Icons/DamageTypes/Electrical/electrical.module.css new file mode 100644 index 0000000..b57bdca --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Electrical/electrical.module.css @@ -0,0 +1,4 @@ +.electricalBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Electrical/index.ts b/src/shared/components/Icons/DamageTypes/Electrical/index.ts new file mode 100644 index 0000000..dedb444 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Electrical/index.ts @@ -0,0 +1 @@ +export { ElectricalSvg } from './Electrical'; diff --git a/src/shared/components/Icons/DamageTypes/ExteriorDamage/ExteriorDamage.tsx b/src/shared/components/Icons/DamageTypes/ExteriorDamage/ExteriorDamage.tsx new file mode 100644 index 0000000..90b0826 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/ExteriorDamage/ExteriorDamage.tsx @@ -0,0 +1,50 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import ExteriorDamage from '../../../../Assets/exterior.svg'; +import Exterior32 from '../../../../Assets/exterior-32.svg'; +// reusing for now....possible asset change in the future + +// Custom css +import classes from './exteriorDamage.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ExteriorDamageSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +ExteriorDamageSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ExteriorDamageSvgMemo = memo(ExteriorDamageSvg, areEqualShallow); +export { ExteriorDamageSvgMemo as ExteriorDamageSvg }; diff --git a/src/shared/components/Icons/DamageTypes/ExteriorDamage/exteriorDamage.module.css b/src/shared/components/Icons/DamageTypes/ExteriorDamage/exteriorDamage.module.css new file mode 100644 index 0000000..14aa0cf --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/ExteriorDamage/exteriorDamage.module.css @@ -0,0 +1,4 @@ +.exteriorDamageBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/ExteriorDamage/index.ts b/src/shared/components/Icons/DamageTypes/ExteriorDamage/index.ts new file mode 100644 index 0000000..82304e2 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/ExteriorDamage/index.ts @@ -0,0 +1 @@ +export { ExteriorDamageSvg } from './ExteriorDamage'; diff --git a/src/shared/components/Icons/DamageTypes/Fire/Fire.tsx b/src/shared/components/Icons/DamageTypes/Fire/Fire.tsx new file mode 100644 index 0000000..038d889 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Fire/Fire.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Fire from '../../../../Assets/fire.svg'; + +// Custom css +import classes from './fire.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FireSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +FireSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const FireSvgMemo = memo(FireSvg, areEqualShallow); +export { FireSvgMemo as FireSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Fire/fire.module.css b/src/shared/components/Icons/DamageTypes/Fire/fire.module.css new file mode 100644 index 0000000..4f16980 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Fire/fire.module.css @@ -0,0 +1,4 @@ +.fireBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Fire/index.ts b/src/shared/components/Icons/DamageTypes/Fire/index.ts new file mode 100644 index 0000000..d40af16 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Fire/index.ts @@ -0,0 +1 @@ +export { FireSvg } from './Fire'; diff --git a/src/shared/components/Icons/DamageTypes/Flooring/Flooring.tsx b/src/shared/components/Icons/DamageTypes/Flooring/Flooring.tsx new file mode 100644 index 0000000..661e4ac --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Flooring/Flooring.tsx @@ -0,0 +1,50 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Flooring from '../../../../Assets/flooring.svg'; +import Flooring32 from '../../../../Assets/flooring-32.svg'; +// reusing for now....possible asset change in the future + +// Custom css +import classes from './flooring.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FlooringSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +FlooringSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const FlooringSvgMemo = memo(FlooringSvg, areEqualShallow); +export { FlooringSvgMemo as FlooringSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Flooring/flooring.module.css b/src/shared/components/Icons/DamageTypes/Flooring/flooring.module.css new file mode 100644 index 0000000..adc435d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Flooring/flooring.module.css @@ -0,0 +1,4 @@ +.flooringBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Flooring/index.ts b/src/shared/components/Icons/DamageTypes/Flooring/index.ts new file mode 100644 index 0000000..fbe9c74 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Flooring/index.ts @@ -0,0 +1 @@ +export { FlooringSvg } from './Flooring'; diff --git a/src/shared/components/Icons/DamageTypes/Impact/Impact.tsx b/src/shared/components/Icons/DamageTypes/Impact/Impact.tsx new file mode 100644 index 0000000..30b7114 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Impact/Impact.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Impact from '../../../../Assets/impact.svg'; + +// Custom css +import classes from './impact.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ImpactSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +ImpactSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ImpactSvgMemo = memo(ImpactSvg, areEqualShallow); +export { ImpactSvgMemo as ImpactSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Impact/impact.module.css b/src/shared/components/Icons/DamageTypes/Impact/impact.module.css new file mode 100644 index 0000000..173464d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Impact/impact.module.css @@ -0,0 +1,4 @@ +.impactBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Impact/index.ts b/src/shared/components/Icons/DamageTypes/Impact/index.ts new file mode 100644 index 0000000..e73c9e3 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Impact/index.ts @@ -0,0 +1 @@ +export { ImpactSvg } from './Impact'; diff --git a/src/shared/components/Icons/DamageTypes/Inspection/Inspection.tsx b/src/shared/components/Icons/DamageTypes/Inspection/Inspection.tsx new file mode 100644 index 0000000..4bab633 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Inspection/Inspection.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Inspection from '../../../../Assets/inspection.svg'; + +// Custom css +import classes from './inspection.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const InspectionSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +InspectionSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const InspectionSvgMemo = memo(InspectionSvg, areEqualShallow); +export { InspectionSvgMemo as InspectionSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Inspection/index.ts b/src/shared/components/Icons/DamageTypes/Inspection/index.ts new file mode 100644 index 0000000..3f96f50 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Inspection/index.ts @@ -0,0 +1 @@ +export { InspectionSvg } from './Inspection'; diff --git a/src/shared/components/Icons/DamageTypes/Inspection/inspection.module.css b/src/shared/components/Icons/DamageTypes/Inspection/inspection.module.css new file mode 100644 index 0000000..d160376 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Inspection/inspection.module.css @@ -0,0 +1,4 @@ +.inspectionBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Misc/Misc.tsx b/src/shared/components/Icons/DamageTypes/Misc/Misc.tsx new file mode 100644 index 0000000..cf25d72 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Misc/Misc.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Misc from '../../../../Assets/misc.svg'; + +// Custom css +import classes from './misc.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MiscSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MiscSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MiscSvgMemo = memo(MiscSvg, areEqualShallow); +export { MiscSvgMemo as MiscSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Misc/index.ts b/src/shared/components/Icons/DamageTypes/Misc/index.ts new file mode 100644 index 0000000..8b6bb63 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Misc/index.ts @@ -0,0 +1 @@ +export { MiscSvg } from './Misc'; diff --git a/src/shared/components/Icons/DamageTypes/Misc/misc.module.css b/src/shared/components/Icons/DamageTypes/Misc/misc.module.css new file mode 100644 index 0000000..e9eb57e --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Misc/misc.module.css @@ -0,0 +1,3 @@ +.miscBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Mold/Mold.tsx b/src/shared/components/Icons/DamageTypes/Mold/Mold.tsx new file mode 100644 index 0000000..eb49074 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Mold/Mold.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Mold from '../../../../Assets/mold.svg'; + +// Custom css +import classes from './mold.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MoldSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MoldSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MoldSvgMemo = memo(MoldSvg, areEqualShallow); +export { MoldSvgMemo as MoldSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Mold/index.ts b/src/shared/components/Icons/DamageTypes/Mold/index.ts new file mode 100644 index 0000000..04d6f1a --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Mold/index.ts @@ -0,0 +1 @@ +export { MoldSvg } from './Mold'; diff --git a/src/shared/components/Icons/DamageTypes/Mold/mold.module.css b/src/shared/components/Icons/DamageTypes/Mold/mold.module.css new file mode 100644 index 0000000..4a7c4af --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Mold/mold.module.css @@ -0,0 +1,4 @@ +.moldBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Natural/Natural.tsx b/src/shared/components/Icons/DamageTypes/Natural/Natural.tsx new file mode 100644 index 0000000..5fb1bd9 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Natural/Natural.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Natural from '../../../../Assets/natural.svg'; + +// Custom css +import classes from './natural.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const NaturalSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +NaturalSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const NaturalSvgMemo = memo(NaturalSvg, areEqualShallow); +export { NaturalSvgMemo as NaturalSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Natural/index.ts b/src/shared/components/Icons/DamageTypes/Natural/index.ts new file mode 100644 index 0000000..4698cce --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Natural/index.ts @@ -0,0 +1 @@ +export { NaturalSvg } from './Natural'; diff --git a/src/shared/components/Icons/DamageTypes/Natural/natural.module.css b/src/shared/components/Icons/DamageTypes/Natural/natural.module.css new file mode 100644 index 0000000..2e44d63 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Natural/natural.module.css @@ -0,0 +1,4 @@ +.naturalBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Plumbing/Plumbing.tsx b/src/shared/components/Icons/DamageTypes/Plumbing/Plumbing.tsx new file mode 100644 index 0000000..c50dd35 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Plumbing/Plumbing.tsx @@ -0,0 +1,50 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Plumbing from '../../../../Assets/plumbing.svg'; +import Plumbing32 from '../../../../Assets/plumbing-32.svg'; +// reusing for now....possible asset change in the future + +// Custom css +import classes from './plumbing.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PlumbingSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +PlumbingSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PlumbingSvgMemo = memo(PlumbingSvg, areEqualShallow); +export { PlumbingSvgMemo as PlumbingSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Plumbing/index.ts b/src/shared/components/Icons/DamageTypes/Plumbing/index.ts new file mode 100644 index 0000000..1ea4561 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Plumbing/index.ts @@ -0,0 +1 @@ +export { PlumbingSvg } from './Plumbing'; diff --git a/src/shared/components/Icons/DamageTypes/Plumbing/plumbing.module.css b/src/shared/components/Icons/DamageTypes/Plumbing/plumbing.module.css new file mode 100644 index 0000000..c462432 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Plumbing/plumbing.module.css @@ -0,0 +1,4 @@ +.plumbingBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Protection/Protection.tsx b/src/shared/components/Icons/DamageTypes/Protection/Protection.tsx new file mode 100644 index 0000000..e0af051 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Protection/Protection.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Protection from '../../../../Assets/protection.svg'; + +// Custom css +import classes from './protection.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ProtectionSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +ProtectionSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ProtectionSvgMemo = memo(ProtectionSvg, areEqualShallow); +export { ProtectionSvgMemo as ProtectionSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Protection/index.ts b/src/shared/components/Icons/DamageTypes/Protection/index.ts new file mode 100644 index 0000000..2b1598f --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Protection/index.ts @@ -0,0 +1 @@ +export { ProtectionSvg } from './Protection'; diff --git a/src/shared/components/Icons/DamageTypes/Protection/protection.module.css b/src/shared/components/Icons/DamageTypes/Protection/protection.module.css new file mode 100644 index 0000000..40625ce --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Protection/protection.module.css @@ -0,0 +1,3 @@ +.protectionBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Roofing/Roofing.tsx b/src/shared/components/Icons/DamageTypes/Roofing/Roofing.tsx new file mode 100644 index 0000000..8c79214 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Roofing/Roofing.tsx @@ -0,0 +1,45 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Roofing from '../../../../Assets/roofing.svg'; +import Roofing32 from '../../../../Assets/roofing-32.svg'; +// reusing for now....possible asset change in the future + +// Custom css +import classes from './roofing.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const RoofingSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +RoofingSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const RoofingSvgMemo = memo(RoofingSvg, areEqualShallow); +export { RoofingSvgMemo as RoofingSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Roofing/index.ts b/src/shared/components/Icons/DamageTypes/Roofing/index.ts new file mode 100644 index 0000000..94314ca --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Roofing/index.ts @@ -0,0 +1 @@ +export { RoofingSvg } from './Roofing'; diff --git a/src/shared/components/Icons/DamageTypes/Roofing/roofing.module.css b/src/shared/components/Icons/DamageTypes/Roofing/roofing.module.css new file mode 100644 index 0000000..9b8af2d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Roofing/roofing.module.css @@ -0,0 +1,4 @@ +.roofingBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Smoke/Smoke.tsx b/src/shared/components/Icons/DamageTypes/Smoke/Smoke.tsx new file mode 100644 index 0000000..b2388bb --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Smoke/Smoke.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Smoke from '../../../../Assets/smoke.svg'; + +// Custom css +import classes from './smoke.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SmokeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SmokeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SmokeSvgMemo = memo(SmokeSvg, areEqualShallow); +export { SmokeSvgMemo as SmokeSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Smoke/index.ts b/src/shared/components/Icons/DamageTypes/Smoke/index.ts new file mode 100644 index 0000000..5568575 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Smoke/index.ts @@ -0,0 +1 @@ +export { SmokeSvg } from './Smoke'; diff --git a/src/shared/components/Icons/DamageTypes/Smoke/smoke.module.css b/src/shared/components/Icons/DamageTypes/Smoke/smoke.module.css new file mode 100644 index 0000000..b72db2e --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Smoke/smoke.module.css @@ -0,0 +1,4 @@ +.smokeBase { + cursor: pointer; + pointer-events: none; + } \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/Structural/Structural.tsx b/src/shared/components/Icons/DamageTypes/Structural/Structural.tsx new file mode 100644 index 0000000..4964591 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Structural/Structural.tsx @@ -0,0 +1,51 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Structural from '../../../../Assets/structural.svg'; +import Structural32 from '../../../../Assets/structural-32.svg'; + +// reusing for now....possible asset change in the future + +// Custom css +import classes from './structural.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const StructuralSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +StructuralSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const StructuralSvgMemo = memo(StructuralSvg, areEqualShallow); +export { StructuralSvgMemo as StructuralSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Structural/index.ts b/src/shared/components/Icons/DamageTypes/Structural/index.ts new file mode 100644 index 0000000..32ab38b --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Structural/index.ts @@ -0,0 +1 @@ +export { StructuralSvg } from './Structural'; diff --git a/src/shared/components/Icons/DamageTypes/Structural/structural.module.css b/src/shared/components/Icons/DamageTypes/Structural/structural.module.css new file mode 100644 index 0000000..bd2d33f --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Structural/structural.module.css @@ -0,0 +1,4 @@ +.structuralBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Walls/Walls.tsx b/src/shared/components/Icons/DamageTypes/Walls/Walls.tsx new file mode 100644 index 0000000..f855c1d --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Walls/Walls.tsx @@ -0,0 +1,40 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Walls from '../../../../Assets/walls.svg'; +import Walls32 from '../../../../Assets/walls-32.svg'; +// reusing for now....possible asset change in the future + +// Custom css +import classes from './walls.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const WallsSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; + +WallsSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const WallsSvgMemo = memo(WallsSvg, areEqualShallow); +export { WallsSvgMemo as WallsSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Walls/index.ts b/src/shared/components/Icons/DamageTypes/Walls/index.ts new file mode 100644 index 0000000..a42cc47 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Walls/index.ts @@ -0,0 +1 @@ +export { WallsSvg } from './Walls'; diff --git a/src/shared/components/Icons/DamageTypes/Walls/walls.module.css b/src/shared/components/Icons/DamageTypes/Walls/walls.module.css new file mode 100644 index 0000000..92ac298 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Walls/walls.module.css @@ -0,0 +1,4 @@ +.wallsBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/DamageTypes/Water/Water.tsx b/src/shared/components/Icons/DamageTypes/Water/Water.tsx new file mode 100644 index 0000000..3478bac --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Water/Water.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Water from '../../../../Assets/water.svg'; + +// Custom css +import classes from './water.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const WaterSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +WaterSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const WaterSvgMemo = memo(WaterSvg, areEqualShallow); +export { WaterSvgMemo as WaterSvg }; diff --git a/src/shared/components/Icons/DamageTypes/Water/index.ts b/src/shared/components/Icons/DamageTypes/Water/index.ts new file mode 100644 index 0000000..e36b85f --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Water/index.ts @@ -0,0 +1 @@ +export { WaterSvg } from './Water'; diff --git a/src/shared/components/Icons/DamageTypes/Water/water.module.css b/src/shared/components/Icons/DamageTypes/Water/water.module.css new file mode 100644 index 0000000..9f8c7c0 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/Water/water.module.css @@ -0,0 +1,4 @@ +.waterBase { + cursor: pointer; + pointer-events: none; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DamageTypes/index.ts b/src/shared/components/Icons/DamageTypes/index.ts new file mode 100644 index 0000000..c5990b4 --- /dev/null +++ b/src/shared/components/Icons/DamageTypes/index.ts @@ -0,0 +1,23 @@ +export { AppliancesSvg } from './Appliances'; +export { AsbestosSvg } from './Asbestos'; +export { CeilingSvg } from './Ceiling'; +export { CustomSvg } from './Custom'; +export { AddCustomSvg } from './AddCustom'; +export { ElectricalSvg } from './Electrical'; +export { ExteriorDamageSvg } from './ExteriorDamage'; +export { FireSvg } from './Fire'; +export { FlooringSvg } from './Flooring'; +export { ImpactSvg } from './Impact'; +export { InspectionSvg } from './Inspection'; +export { MoldSvg } from './Mold'; +export { NaturalSvg } from './Natural'; +export { PlumbingSvg } from './Plumbing'; +export { RoofingSvg } from './Roofing'; +export { SmokeSvg } from './Smoke'; +export { StructuralSvg } from './Structural'; +export { WallsSvg } from './Walls'; +export { WaterSvg } from './Water'; +export { CarpentrySvg } from './Carpentry'; +export { CleaningSvg } from './Cleaning'; +export { MiscSvg } from './Misc'; +export { ProtectionSvg } from './Protection'; diff --git a/src/shared/components/Icons/Dashboard/Dashboard.tsx b/src/shared/components/Icons/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..1d726c6 --- /dev/null +++ b/src/shared/components/Icons/Dashboard/Dashboard.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import Dashboard from '../../../Assets/dashboard.svg'; + +// Custom css +import classes from './dashboard.module.css'; + +interface Props { + className?: string; + fill: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DashboardSvg = ({ className = '', fill = '#5B476B', id, onClick, onKeyUp }: Props) => ( + +); + +DashboardSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DashboardSvgMemo = memo(DashboardSvg, areEqualShallow); +export { DashboardSvgMemo as DashboardSvg }; diff --git a/src/shared/components/Icons/Dashboard/dashboard.module.css b/src/shared/components/Icons/Dashboard/dashboard.module.css new file mode 100644 index 0000000..e613bc5 --- /dev/null +++ b/src/shared/components/Icons/Dashboard/dashboard.module.css @@ -0,0 +1,3 @@ +.dashboardBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Dashboard/index.ts b/src/shared/components/Icons/Dashboard/index.ts new file mode 100644 index 0000000..7aa70f8 --- /dev/null +++ b/src/shared/components/Icons/Dashboard/index.ts @@ -0,0 +1 @@ +export { DashboardSvg } from './Dashboard'; diff --git a/src/shared/components/Icons/Dehumidifier/Dehumidifier.tsx b/src/shared/components/Icons/Dehumidifier/Dehumidifier.tsx new file mode 100644 index 0000000..3bca916 --- /dev/null +++ b/src/shared/components/Icons/Dehumidifier/Dehumidifier.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Dehumidifier from '../../../Assets/dehumidifier.svg'; + +// Custom css +import classes from './dehumidifier.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DehumidifierSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +DehumidifierSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DehumidifierSvgMemo = memo(DehumidifierSvg, areEqualShallow); +export { DehumidifierSvgMemo as DehumidifierSvg }; diff --git a/src/shared/components/Icons/Dehumidifier/dehumidifier.module.css b/src/shared/components/Icons/Dehumidifier/dehumidifier.module.css new file mode 100644 index 0000000..d38255f --- /dev/null +++ b/src/shared/components/Icons/Dehumidifier/dehumidifier.module.css @@ -0,0 +1,3 @@ +.dehumidifierBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Dehumidifier/index.ts b/src/shared/components/Icons/Dehumidifier/index.ts new file mode 100644 index 0000000..8c5bdc9 --- /dev/null +++ b/src/shared/components/Icons/Dehumidifier/index.ts @@ -0,0 +1 @@ +export { DehumidifierSvg } from './Dehumidifier'; diff --git a/src/shared/components/Icons/Den/Den.tsx b/src/shared/components/Icons/Den/Den.tsx new file mode 100644 index 0000000..f5ca643 --- /dev/null +++ b/src/shared/components/Icons/Den/Den.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Den from "../../../Assets/den.svg"; + +// Custom css +import classes from "./den.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DenSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +DenSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DenSvgMemo = memo(DenSvg, areEqualShallow); +export { DenSvgMemo as DenSvg }; diff --git a/src/shared/components/Icons/Den/den.module.css b/src/shared/components/Icons/Den/den.module.css new file mode 100644 index 0000000..e968c9e --- /dev/null +++ b/src/shared/components/Icons/Den/den.module.css @@ -0,0 +1,3 @@ +.denBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Den/index.ts b/src/shared/components/Icons/Den/index.ts new file mode 100644 index 0000000..d67dba5 --- /dev/null +++ b/src/shared/components/Icons/Den/index.ts @@ -0,0 +1 @@ +export { DenSvg } from "./Den"; diff --git a/src/shared/components/Icons/DiningRoom/DiningRoom.tsx b/src/shared/components/Icons/DiningRoom/DiningRoom.tsx new file mode 100644 index 0000000..bd6c934 --- /dev/null +++ b/src/shared/components/Icons/DiningRoom/DiningRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import DiningRoom from "../../../Assets/dining-room.svg"; + +// Custom css +import classes from "./diningRoom.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DiningRoomSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +DiningRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DiningRoomSvgMemo = memo(DiningRoomSvg, areEqualShallow); +export { DiningRoomSvgMemo as DiningRoomSvg }; diff --git a/src/shared/components/Icons/DiningRoom/diningRoom.module.css b/src/shared/components/Icons/DiningRoom/diningRoom.module.css new file mode 100644 index 0000000..809d4c9 --- /dev/null +++ b/src/shared/components/Icons/DiningRoom/diningRoom.module.css @@ -0,0 +1,3 @@ +.diningRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/DiningRoom/index.ts b/src/shared/components/Icons/DiningRoom/index.ts new file mode 100644 index 0000000..dfb254e --- /dev/null +++ b/src/shared/components/Icons/DiningRoom/index.ts @@ -0,0 +1 @@ +export { DiningRoomSvg } from "./DiningRoom"; diff --git a/src/shared/components/Icons/Dot/Dot.tsx b/src/shared/components/Icons/Dot/Dot.tsx new file mode 100644 index 0000000..d5b2a6d --- /dev/null +++ b/src/shared/components/Icons/Dot/Dot.tsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Dot from '../../../Assets/dot.svg'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const DotSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +DotSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DotSvgMemo = memo(DotSvg, areEqualShallow); +export { DotSvgMemo as DotSvg }; diff --git a/src/shared/components/Icons/Dot/index.ts b/src/shared/components/Icons/Dot/index.ts new file mode 100644 index 0000000..a4e9e9d --- /dev/null +++ b/src/shared/components/Icons/Dot/index.ts @@ -0,0 +1 @@ +export { DotSvg } from './Dot'; diff --git a/src/shared/components/Icons/Download/Download.tsx b/src/shared/components/Icons/Download/Download.tsx new file mode 100644 index 0000000..ad2fde6 --- /dev/null +++ b/src/shared/components/Icons/Download/Download.tsx @@ -0,0 +1,46 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import Download from '../../../Assets/download.svg'; +import DownloadPurple from '../../../Assets/download-purple.svg'; + +// Custom css +import classes from './download.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const DownloadSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'purple': + return ( + + ); + default: + return ( + + ); + } +}; + +DownloadSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DownloadSvgMemo = memo(DownloadSvg, areEqualShallow); +export { DownloadSvgMemo as DownloadSvg }; diff --git a/src/shared/components/Icons/Download/download.module.css b/src/shared/components/Icons/Download/download.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Download/download.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Download/index.ts b/src/shared/components/Icons/Download/index.ts new file mode 100644 index 0000000..06f9507 --- /dev/null +++ b/src/shared/components/Icons/Download/index.ts @@ -0,0 +1 @@ +export { DownloadSvg } from './Download'; diff --git a/src/shared/components/Icons/DropdownArrow/DropdownArrow.tsx b/src/shared/components/Icons/DropdownArrow/DropdownArrow.tsx new file mode 100644 index 0000000..ca11d81 --- /dev/null +++ b/src/shared/components/Icons/DropdownArrow/DropdownArrow.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; +import DropdownArrow from "../../../Assets/chevron-down.svg"; + +// Custom css +import classes from "./dropdownArrow.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DropdownArrowSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +DropdownArrowSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DropdownArrowSvgMemo = memo(DropdownArrowSvg, areEqual); +export { DropdownArrowSvgMemo as DropdownArrowSvg }; diff --git a/src/shared/components/Icons/DropdownArrow/dropdownArrow.module.css b/src/shared/components/Icons/DropdownArrow/dropdownArrow.module.css new file mode 100644 index 0000000..8cee42e --- /dev/null +++ b/src/shared/components/Icons/DropdownArrow/dropdownArrow.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DropdownArrow/index.ts b/src/shared/components/Icons/DropdownArrow/index.ts new file mode 100644 index 0000000..2ab296f --- /dev/null +++ b/src/shared/components/Icons/DropdownArrow/index.ts @@ -0,0 +1 @@ +export { DropdownArrowSvg } from "./DropdownArrow"; diff --git a/src/shared/components/Icons/DropzoneBackground/DropzoneBackground.tsx b/src/shared/components/Icons/DropzoneBackground/DropzoneBackground.tsx new file mode 100644 index 0000000..7ea948e --- /dev/null +++ b/src/shared/components/Icons/DropzoneBackground/DropzoneBackground.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import DropzoneBackground from '../../../Assets/dropzone-background.svg'; + +// Custom css +import classes from './dropzonebackground.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DropzoneBackgroundSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +DropzoneBackgroundSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DropzoneBackgroundSvgMemo = memo(DropzoneBackgroundSvg, areEqualShallow); +export { DropzoneBackgroundSvgMemo as DropzoneBackgroundSvg }; diff --git a/src/shared/components/Icons/DropzoneBackground/dropzonebackground.module.css b/src/shared/components/Icons/DropzoneBackground/dropzonebackground.module.css new file mode 100644 index 0000000..de00a30 --- /dev/null +++ b/src/shared/components/Icons/DropzoneBackground/dropzonebackground.module.css @@ -0,0 +1,3 @@ +.dropzoneBackgroundBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/DropzoneBackground/index.ts b/src/shared/components/Icons/DropzoneBackground/index.ts new file mode 100644 index 0000000..d12c131 --- /dev/null +++ b/src/shared/components/Icons/DropzoneBackground/index.ts @@ -0,0 +1 @@ +export { DropzoneBackgroundSvg } from './DropzoneBackground'; diff --git a/src/shared/components/Icons/DryingMat/DryingMat.tsx b/src/shared/components/Icons/DryingMat/DryingMat.tsx new file mode 100644 index 0000000..2861838 --- /dev/null +++ b/src/shared/components/Icons/DryingMat/DryingMat.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import DryingMat from '../../../Assets/drying-mat.svg'; + +// Custom css +import classes from './dryingMat.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DryingMatSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +DryingMatSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DryingMatSvgMemo = memo(DryingMatSvg, areEqualShallow); +export { DryingMatSvgMemo as DryingMatSvg }; diff --git a/src/shared/components/Icons/DryingMat/dryingMat.module.css b/src/shared/components/Icons/DryingMat/dryingMat.module.css new file mode 100644 index 0000000..c24ae66 --- /dev/null +++ b/src/shared/components/Icons/DryingMat/dryingMat.module.css @@ -0,0 +1,3 @@ +.dryingMatBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/DryingMat/index.ts b/src/shared/components/Icons/DryingMat/index.ts new file mode 100644 index 0000000..be76755 --- /dev/null +++ b/src/shared/components/Icons/DryingMat/index.ts @@ -0,0 +1 @@ +export { DryingMatSvg } from './DryingMat'; diff --git a/src/shared/components/Icons/Edit/Edit.tsx b/src/shared/components/Icons/Edit/Edit.tsx new file mode 100644 index 0000000..d4f8968 --- /dev/null +++ b/src/shared/components/Icons/Edit/Edit.tsx @@ -0,0 +1,42 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Edit from '../../../Assets/edit-lg.svg'; +import EditSm from '../../../Assets/edit.svg'; +import EditMd from '../../../Assets/edit-md.svg'; + +// Custom css +import classes from './edit.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EditSvg = ({ className = '', id, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 2: + return ( + + ); + case 3: + return ( + + ); + default: + return ; + } +}; + +EditSvg.defaultProps = { + className: undefined, + id: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const EditSvgMemo = memo(EditSvg, areEqualShallow); +export { EditSvgMemo as EditSvg }; diff --git a/src/shared/components/Icons/Edit/edit.module.css b/src/shared/components/Icons/Edit/edit.module.css new file mode 100644 index 0000000..0ae552d --- /dev/null +++ b/src/shared/components/Icons/Edit/edit.module.css @@ -0,0 +1,3 @@ +.editBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Edit/index.ts b/src/shared/components/Icons/Edit/index.ts new file mode 100644 index 0000000..254ba31 --- /dev/null +++ b/src/shared/components/Icons/Edit/index.ts @@ -0,0 +1 @@ +export { EditSvg } from './Edit'; diff --git a/src/shared/components/Icons/ElectricalRoom/ElectricalRoom.tsx b/src/shared/components/Icons/ElectricalRoom/ElectricalRoom.tsx new file mode 100644 index 0000000..47e74e3 --- /dev/null +++ b/src/shared/components/Icons/ElectricalRoom/ElectricalRoom.tsx @@ -0,0 +1,32 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import ElectricalRoom from "../../../Assets/electrical-room.svg"; + +// Custom css +import classes from "./electricalRoom.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ElectricalRoomSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ElectricalRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ElectricalRoomSvgMemo = memo(ElectricalRoomSvg, areEqualShallow); +export { ElectricalRoomSvgMemo as ElectricalRoomSvg }; diff --git a/src/shared/components/Icons/ElectricalRoom/electricalRoom.module.css b/src/shared/components/Icons/ElectricalRoom/electricalRoom.module.css new file mode 100644 index 0000000..f81256f --- /dev/null +++ b/src/shared/components/Icons/ElectricalRoom/electricalRoom.module.css @@ -0,0 +1,3 @@ +.electricalRoomBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/ElectricalRoom/index.ts b/src/shared/components/Icons/ElectricalRoom/index.ts new file mode 100644 index 0000000..99eca27 --- /dev/null +++ b/src/shared/components/Icons/ElectricalRoom/index.ts @@ -0,0 +1 @@ +export { ElectricalRoomSvg } from "./ElectricalRoom"; diff --git a/src/shared/components/Icons/Elevator/Elevator.tsx b/src/shared/components/Icons/Elevator/Elevator.tsx new file mode 100644 index 0000000..6dbeec3 --- /dev/null +++ b/src/shared/components/Icons/Elevator/Elevator.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Elevator from "../../../Assets/elevator.svg"; + +// Custom css +import classes from "./elevator.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ElevatorSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ElevatorSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ElevatorSvgMemo = memo(ElevatorSvg, areEqualShallow); +export { ElevatorSvgMemo as ElevatorSvg }; diff --git a/src/shared/components/Icons/Elevator/elevator.module.css b/src/shared/components/Icons/Elevator/elevator.module.css new file mode 100644 index 0000000..75c4a81 --- /dev/null +++ b/src/shared/components/Icons/Elevator/elevator.module.css @@ -0,0 +1,3 @@ +.elevatorBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Elevator/index.ts b/src/shared/components/Icons/Elevator/index.ts new file mode 100644 index 0000000..ec7e57f --- /dev/null +++ b/src/shared/components/Icons/Elevator/index.ts @@ -0,0 +1 @@ +export { ElevatorSvg } from "./Elevator"; diff --git a/src/shared/components/Icons/Email/Email.tsx b/src/shared/components/Icons/Email/Email.tsx new file mode 100644 index 0000000..e06e35e --- /dev/null +++ b/src/shared/components/Icons/Email/Email.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Email from '../../../Assets/email-new.svg'; + +// Custom css +import classes from './email.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EmailSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +EmailSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EmailSvgMemo = memo(EmailSvg, areEqualShallow); +export { EmailSvgMemo as EmailSvg }; diff --git a/src/shared/components/Icons/Email/email.module.css b/src/shared/components/Icons/Email/email.module.css new file mode 100644 index 0000000..8ef8662 --- /dev/null +++ b/src/shared/components/Icons/Email/email.module.css @@ -0,0 +1,3 @@ +.emailBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Email/index.ts b/src/shared/components/Icons/Email/index.ts new file mode 100644 index 0000000..4f0f271 --- /dev/null +++ b/src/shared/components/Icons/Email/index.ts @@ -0,0 +1 @@ +export { EmailSvg } from './Email'; diff --git a/src/shared/components/Icons/EmployeePhone/EmployeePhone.tsx b/src/shared/components/Icons/EmployeePhone/EmployeePhone.tsx new file mode 100644 index 0000000..ae45b1d --- /dev/null +++ b/src/shared/components/Icons/EmployeePhone/EmployeePhone.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import EmployeePhone from '../../../Assets/employee-phone.svg'; + +// Custom css +import classes from './employeePhone.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EmployeePhoneSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +EmployeePhoneSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EmployeePhoneSvgMemo = memo(EmployeePhoneSvg, areEqualShallow); +export { EmployeePhoneSvgMemo as EmployeePhoneSvg }; diff --git a/src/shared/components/Icons/EmployeePhone/employeePhone.module.css b/src/shared/components/Icons/EmployeePhone/employeePhone.module.css new file mode 100644 index 0000000..79cf5ba --- /dev/null +++ b/src/shared/components/Icons/EmployeePhone/employeePhone.module.css @@ -0,0 +1,3 @@ +.employeePhoneBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/EmployeePhone/index.ts b/src/shared/components/Icons/EmployeePhone/index.ts new file mode 100644 index 0000000..745c5f2 --- /dev/null +++ b/src/shared/components/Icons/EmployeePhone/index.ts @@ -0,0 +1 @@ +export { EmployeePhoneSvg } from './EmployeePhone'; diff --git a/src/shared/components/Icons/Ensuite/Ensuite.tsx b/src/shared/components/Icons/Ensuite/Ensuite.tsx new file mode 100644 index 0000000..4c882f1 --- /dev/null +++ b/src/shared/components/Icons/Ensuite/Ensuite.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Ensuite from "../../../Assets/ensuite.svg"; + +// Custom css +import classes from "./ensuite.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EnsuiteSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +EnsuiteSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EnsuiteSvgMemo = memo(EnsuiteSvg, areEqualShallow); +export { EnsuiteSvgMemo as EnsuiteSvg }; diff --git a/src/shared/components/Icons/Ensuite/ensuite.module.css b/src/shared/components/Icons/Ensuite/ensuite.module.css new file mode 100644 index 0000000..f37f6e6 --- /dev/null +++ b/src/shared/components/Icons/Ensuite/ensuite.module.css @@ -0,0 +1,3 @@ +.ensuiteBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Ensuite/index.ts b/src/shared/components/Icons/Ensuite/index.ts new file mode 100644 index 0000000..a509d36 --- /dev/null +++ b/src/shared/components/Icons/Ensuite/index.ts @@ -0,0 +1 @@ +export { EnsuiteSvg } from "./Ensuite"; diff --git a/src/shared/components/Icons/Equipment/Equipment.tsx b/src/shared/components/Icons/Equipment/Equipment.tsx new file mode 100644 index 0000000..d73bb44 --- /dev/null +++ b/src/shared/components/Icons/Equipment/Equipment.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Equipment from '../../../Assets/equipment-log.svg'; + +// Custom css +import classes from './equipment.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EquipmentSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +EquipmentSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EquipmentSvgMemo = memo(EquipmentSvg, areEqualShallow); +export { EquipmentSvgMemo as EquipmentSvg }; diff --git a/src/shared/components/Icons/Equipment/equipment.module.css b/src/shared/components/Icons/Equipment/equipment.module.css new file mode 100644 index 0000000..f476e63 --- /dev/null +++ b/src/shared/components/Icons/Equipment/equipment.module.css @@ -0,0 +1,4 @@ +.equipmentBase { + cursor: pointer; +} + \ No newline at end of file diff --git a/src/shared/components/Icons/Equipment/index.ts b/src/shared/components/Icons/Equipment/index.ts new file mode 100644 index 0000000..a1af617 --- /dev/null +++ b/src/shared/components/Icons/Equipment/index.ts @@ -0,0 +1 @@ +export { EquipmentSvg } from './Equipment'; diff --git a/src/shared/components/Icons/Exterior/Exterior.tsx b/src/shared/components/Icons/Exterior/Exterior.tsx new file mode 100644 index 0000000..44dd1d8 --- /dev/null +++ b/src/shared/components/Icons/Exterior/Exterior.tsx @@ -0,0 +1,50 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import Exterior from '../../../Assets/exterior.svg'; +import ExteriorAdd from '../../../Assets/exterior-add.svg'; + +// Custom css +import classes from './exterior.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const ExteriorSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 2: + return ( + + ); + default: + return ( + + ); + } +}; + +ExteriorSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const ExteriorSvgMemo = memo(ExteriorSvg, areEqual); +export { ExteriorSvgMemo as ExteriorSvg }; diff --git a/src/shared/components/Icons/Exterior/exterior.module.css b/src/shared/components/Icons/Exterior/exterior.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/shared/components/Icons/Exterior/index.ts b/src/shared/components/Icons/Exterior/index.ts new file mode 100644 index 0000000..4010e52 --- /dev/null +++ b/src/shared/components/Icons/Exterior/index.ts @@ -0,0 +1 @@ +export { ExteriorSvg } from './Exterior'; diff --git a/src/shared/components/Icons/Eye/Eye.tsx b/src/shared/components/Icons/Eye/Eye.tsx new file mode 100644 index 0000000..5a6c8d2 --- /dev/null +++ b/src/shared/components/Icons/Eye/Eye.tsx @@ -0,0 +1,28 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import Eye from '../../../Assets/eye.svg'; + +// Custom css +import classes from './eye.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const EyeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +EyeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EyeSvgMemo = memo(EyeSvg, areEqual); +export { EyeSvgMemo as EyeSvg }; diff --git a/src/shared/components/Icons/Eye/eye.module.css b/src/shared/components/Icons/Eye/eye.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Eye/eye.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Eye/index.ts b/src/shared/components/Icons/Eye/index.ts new file mode 100644 index 0000000..db90afc --- /dev/null +++ b/src/shared/components/Icons/Eye/index.ts @@ -0,0 +1 @@ +export { EyeSvg } from './Eye'; diff --git a/src/shared/components/Icons/EyeClosed/EyeClosed.tsx b/src/shared/components/Icons/EyeClosed/EyeClosed.tsx new file mode 100644 index 0000000..9ea0da6 --- /dev/null +++ b/src/shared/components/Icons/EyeClosed/EyeClosed.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import EyeClosed from '../../../Assets/eye-closed.svg'; + +// Custom css +import classes from './eyeClosed.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const EyeClosedSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +EyeClosedSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const EyeClosedSvgMemo = memo(EyeClosedSvg, areEqual); +export { EyeClosedSvgMemo as EyeClosedSvg }; diff --git a/src/shared/components/Icons/EyeClosed/eyeClosed.module.css b/src/shared/components/Icons/EyeClosed/eyeClosed.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/EyeClosed/eyeClosed.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/EyeClosed/index.ts b/src/shared/components/Icons/EyeClosed/index.ts new file mode 100644 index 0000000..c69d0c7 --- /dev/null +++ b/src/shared/components/Icons/EyeClosed/index.ts @@ -0,0 +1 @@ +export { EyeClosedSvg } from './EyeClosed'; diff --git a/src/shared/components/Icons/Facebook/Facebook.tsx b/src/shared/components/Icons/Facebook/Facebook.tsx new file mode 100644 index 0000000..f185c4b --- /dev/null +++ b/src/shared/components/Icons/Facebook/Facebook.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Facebook from '../../../Assets/facebook.svg'; + +// Custom css +import classes from './facebook.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FacebookSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +FacebookSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const FacebookSvgMemo = memo(FacebookSvg, areEqualShallow); +export { FacebookSvgMemo as FacebookSvg }; diff --git a/src/shared/components/Icons/Facebook/facebook.module.css b/src/shared/components/Icons/Facebook/facebook.module.css new file mode 100644 index 0000000..4719777 --- /dev/null +++ b/src/shared/components/Icons/Facebook/facebook.module.css @@ -0,0 +1,3 @@ +.facebookBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Facebook/index.ts b/src/shared/components/Icons/Facebook/index.ts new file mode 100644 index 0000000..7f1d4f7 --- /dev/null +++ b/src/shared/components/Icons/Facebook/index.ts @@ -0,0 +1 @@ +export { FacebookSvg } from './Facebook'; diff --git a/src/shared/components/Icons/Filter/Filter.tsx b/src/shared/components/Icons/Filter/Filter.tsx new file mode 100644 index 0000000..645f1e6 --- /dev/null +++ b/src/shared/components/Icons/Filter/Filter.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Filter from "../../../Assets/filter.svg"; + +// Custom css +import classes from "./filter.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FilterSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +FilterSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const FilterSvgMemo = memo(FilterSvg, areEqualShallow); +export { FilterSvgMemo as FilterSvg }; diff --git a/src/shared/components/Icons/Filter/filter.module.css b/src/shared/components/Icons/Filter/filter.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Filter/filter.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Filter/index.ts b/src/shared/components/Icons/Filter/index.ts new file mode 100644 index 0000000..1fb2390 --- /dev/null +++ b/src/shared/components/Icons/Filter/index.ts @@ -0,0 +1 @@ +export { FilterSvg } from "./Filter"; diff --git a/src/shared/components/Icons/Flag/Flag.tsx b/src/shared/components/Icons/Flag/Flag.tsx new file mode 100644 index 0000000..9126f2e --- /dev/null +++ b/src/shared/components/Icons/Flag/Flag.tsx @@ -0,0 +1,63 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Flag from '../../../Assets/flag.svg'; +import FlagPurple from '../../../Assets/flag-purple.svg'; +import FlagPhoto from '../../../Assets/flag-photo.svg'; +import FlaggedPhoto from '../../../Assets/flagged-photo.svg'; +import FlagOutlinePurple from '../../../Assets/flag-outline-purple.svg'; +// Custom css +import classes from './flag.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const FlagSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'flagPhoto': + return ( + + ); + case 'flaggedPhoto': + return ( + + ); + + case 'purple': + return ( + + ); + case 'outlinepurple': + return ( + + ); + default: + return ; + } +}; + +FlagSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 'default', + onClick: undefined, + onKeyUp: undefined, +}; + +const FlagSvgMemo = memo(FlagSvg, areEqualShallow); +export { FlagSvgMemo as FlagSvg }; diff --git a/src/shared/components/Icons/Flag/flag.module.css b/src/shared/components/Icons/Flag/flag.module.css new file mode 100644 index 0000000..29da26c --- /dev/null +++ b/src/shared/components/Icons/Flag/flag.module.css @@ -0,0 +1,3 @@ +.flagBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Flag/index.ts b/src/shared/components/Icons/Flag/index.ts new file mode 100644 index 0000000..fd1b516 --- /dev/null +++ b/src/shared/components/Icons/Flag/index.ts @@ -0,0 +1 @@ +export { FlagSvg } from './Flag'; diff --git a/src/shared/components/Icons/Floor/Floor.tsx b/src/shared/components/Icons/Floor/Floor.tsx new file mode 100644 index 0000000..c70e5c6 --- /dev/null +++ b/src/shared/components/Icons/Floor/Floor.tsx @@ -0,0 +1,44 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Floor from '../../../Assets/floor.svg'; +import FloorSm from '../../../Assets/floor-sm.svg'; +import FloorAdd from '../../../Assets/floor-add.svg'; + +// Custom css +import classes from './floor.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FloorSvg = ({ className = '', id, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 2: + return ( + + ); + case 3: + return ( + + ); + default: + return ( + + ); + } +}; + +FloorSvg.defaultProps = { + className: undefined, + id: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const FloorSvgMemo = memo(FloorSvg, areEqualShallow); +export { FloorSvgMemo as FloorSvg }; diff --git a/src/shared/components/Icons/Floor/floor.module.css b/src/shared/components/Icons/Floor/floor.module.css new file mode 100644 index 0000000..5474670 --- /dev/null +++ b/src/shared/components/Icons/Floor/floor.module.css @@ -0,0 +1,3 @@ +.floorBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Floor/index.ts b/src/shared/components/Icons/Floor/index.ts new file mode 100644 index 0000000..7a98343 --- /dev/null +++ b/src/shared/components/Icons/Floor/index.ts @@ -0,0 +1 @@ +export { FloorSvg } from "./Floor"; diff --git a/src/shared/components/Icons/Funnel/Funnel.tsx b/src/shared/components/Icons/Funnel/Funnel.tsx new file mode 100644 index 0000000..2c3cbdb --- /dev/null +++ b/src/shared/components/Icons/Funnel/Funnel.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; +import Funnel from "../../../Assets/funnel-fill.svg"; + +// Custom css +import classes from "./funnel.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const FunnelSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +FunnelSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const FunnelSvgMemo = memo(FunnelSvg, areEqual); +export { FunnelSvgMemo as FunnelSvg }; diff --git a/src/shared/components/Icons/Funnel/funnel.module.css b/src/shared/components/Icons/Funnel/funnel.module.css new file mode 100644 index 0000000..8cee42e --- /dev/null +++ b/src/shared/components/Icons/Funnel/funnel.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Funnel/index.ts b/src/shared/components/Icons/Funnel/index.ts new file mode 100644 index 0000000..31bb7e1 --- /dev/null +++ b/src/shared/components/Icons/Funnel/index.ts @@ -0,0 +1 @@ +export { FunnelSvg } from "./Funnel"; diff --git a/src/shared/components/Icons/GalleryPlaceholder/GalleryPlaceholder.tsx b/src/shared/components/Icons/GalleryPlaceholder/GalleryPlaceholder.tsx new file mode 100644 index 0000000..610c6e3 --- /dev/null +++ b/src/shared/components/Icons/GalleryPlaceholder/GalleryPlaceholder.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import GalleryPlaceholder from '../../../Assets/galleryplaceholder.svg'; + +interface Props { + className?: string; + id?: string; +} +const GalleryPlaceholderSvg = ({ className = '', id }: Props) => ( + +); + +GalleryPlaceholderSvg.defaultProps = { + className: undefined, + id: undefined, +}; + +const GalleryPlaceholderSvgMemo = memo(GalleryPlaceholderSvg, areEqualShallow); +export { GalleryPlaceholderSvgMemo as GalleryPlaceholderSvg }; diff --git a/src/shared/components/Icons/GalleryPlaceholder/index.ts b/src/shared/components/Icons/GalleryPlaceholder/index.ts new file mode 100644 index 0000000..6e156ac --- /dev/null +++ b/src/shared/components/Icons/GalleryPlaceholder/index.ts @@ -0,0 +1 @@ +export { GalleryPlaceholderSvg } from './GalleryPlaceholder'; diff --git a/src/shared/components/Icons/Google/Google.tsx b/src/shared/components/Icons/Google/Google.tsx new file mode 100644 index 0000000..c6367fe --- /dev/null +++ b/src/shared/components/Icons/Google/Google.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Google from '../../../Assets/google.svg'; + +// Custom css +import classes from './google.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const GoogleSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +GoogleSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const GoogleSvgMemo = memo(GoogleSvg, areEqualShallow); +export { GoogleSvgMemo as GoogleSvg }; diff --git a/src/shared/components/Icons/Google/google.module.css b/src/shared/components/Icons/Google/google.module.css new file mode 100644 index 0000000..79a480e --- /dev/null +++ b/src/shared/components/Icons/Google/google.module.css @@ -0,0 +1,3 @@ +.googleBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Google/index.ts b/src/shared/components/Icons/Google/index.ts new file mode 100644 index 0000000..839b9fa --- /dev/null +++ b/src/shared/components/Icons/Google/index.ts @@ -0,0 +1 @@ +export { GoogleSvg } from './Google'; diff --git a/src/shared/components/Icons/Gym/Gym.tsx b/src/shared/components/Icons/Gym/Gym.tsx new file mode 100644 index 0000000..070eba8 --- /dev/null +++ b/src/shared/components/Icons/Gym/Gym.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Gym from "../../../Assets/gym.svg"; + +// Custom css +import classes from "./gym.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const GymSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +GymSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const GymSvgMemo = memo(GymSvg, areEqualShallow); +export { GymSvgMemo as GymSvg }; diff --git a/src/shared/components/Icons/Gym/gym.module.css b/src/shared/components/Icons/Gym/gym.module.css new file mode 100644 index 0000000..a9f468d --- /dev/null +++ b/src/shared/components/Icons/Gym/gym.module.css @@ -0,0 +1,3 @@ +.gymBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Gym/index.ts b/src/shared/components/Icons/Gym/index.ts new file mode 100644 index 0000000..d87d8cc --- /dev/null +++ b/src/shared/components/Icons/Gym/index.ts @@ -0,0 +1 @@ +export { GymSvg } from "./Gym"; diff --git a/src/shared/components/Icons/Hallway/Hallway.tsx b/src/shared/components/Icons/Hallway/Hallway.tsx new file mode 100644 index 0000000..9d23149 --- /dev/null +++ b/src/shared/components/Icons/Hallway/Hallway.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Hallway from "../../../Assets/hallway.svg"; + +// Custom css +import classes from "./hallway.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const HallwaySvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +HallwaySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const HallwaySvgMemo = memo(HallwaySvg, areEqualShallow); +export { HallwaySvgMemo as HallwaySvg }; diff --git a/src/shared/components/Icons/Hallway/hallway.module.css b/src/shared/components/Icons/Hallway/hallway.module.css new file mode 100644 index 0000000..77d5c8c --- /dev/null +++ b/src/shared/components/Icons/Hallway/hallway.module.css @@ -0,0 +1,3 @@ +.hallwayBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Hallway/index.ts b/src/shared/components/Icons/Hallway/index.ts new file mode 100644 index 0000000..500431f --- /dev/null +++ b/src/shared/components/Icons/Hallway/index.ts @@ -0,0 +1 @@ +export { HallwaySvg } from "./Hallway"; diff --git a/src/shared/components/Icons/HamburgerMenu/HamburgerMenu.tsx b/src/shared/components/Icons/HamburgerMenu/HamburgerMenu.tsx new file mode 100644 index 0000000..6322c3b --- /dev/null +++ b/src/shared/components/Icons/HamburgerMenu/HamburgerMenu.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import HamburgerMenu from '../../../Assets/hamburger-menu.svg'; + +// Custom css +import classes from './hamburgerMenu.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const HamburgerMenuSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +HamburgerMenuSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const HamburgerMenuSvgMemo = memo(HamburgerMenuSvg, areEqualShallow); +export { HamburgerMenuSvgMemo as HamburgerMenuSvg }; diff --git a/src/shared/components/Icons/HamburgerMenu/hamburgerMenu.module.css b/src/shared/components/Icons/HamburgerMenu/hamburgerMenu.module.css new file mode 100644 index 0000000..c9c3b08 --- /dev/null +++ b/src/shared/components/Icons/HamburgerMenu/hamburgerMenu.module.css @@ -0,0 +1,3 @@ +.hamburgerMenuBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/HamburgerMenu/index.ts b/src/shared/components/Icons/HamburgerMenu/index.ts new file mode 100644 index 0000000..4553b69 --- /dev/null +++ b/src/shared/components/Icons/HamburgerMenu/index.ts @@ -0,0 +1 @@ +export { HamburgerMenuSvg } from './HamburgerMenu'; diff --git a/src/shared/components/Icons/Hand/Hand.tsx b/src/shared/components/Icons/Hand/Hand.tsx new file mode 100644 index 0000000..88f570b --- /dev/null +++ b/src/shared/components/Icons/Hand/Hand.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Hand from "../../../Assets/hand.svg"; + +// Custom css +import classes from "./hand.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const HandSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +HandSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const HandSvgMemo = memo(HandSvg, areEqualShallow); +export { HandSvgMemo as HandSvg }; diff --git a/src/shared/components/Icons/Hand/hand.module.css b/src/shared/components/Icons/Hand/hand.module.css new file mode 100644 index 0000000..923d843 --- /dev/null +++ b/src/shared/components/Icons/Hand/hand.module.css @@ -0,0 +1,3 @@ +.handBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Hand/index.ts b/src/shared/components/Icons/Hand/index.ts new file mode 100644 index 0000000..e5d1a3f --- /dev/null +++ b/src/shared/components/Icons/Hand/index.ts @@ -0,0 +1 @@ +export { HandSvg } from "./Hand"; diff --git a/src/shared/components/Icons/Highrise/Highrise.tsx b/src/shared/components/Icons/Highrise/Highrise.tsx new file mode 100644 index 0000000..247014c --- /dev/null +++ b/src/shared/components/Icons/Highrise/Highrise.tsx @@ -0,0 +1,51 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import Highrise from '../../../Assets/highrise.svg'; +import HighriseSmall from '../../../Assets/highrise-small.svg'; + +import classes from './highrise.module.css'; + +interface Props { + id?: string; + className?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const HighriseSvg = ({ id, className, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'highrisesmall': + return ( + + ); + default: + return ( + + ); + } +}; + +HighriseSvg.defaultProps = { + id: undefined, + className: undefined, + iconType: 'highrise', + onClick: undefined, + onKeyUp: undefined, +}; + +const HighriseSvgMemo = memo(HighriseSvg, areEqual); + +export { HighriseSvgMemo as HighriseSvg }; diff --git a/src/shared/components/Icons/Highrise/highrise.module.css b/src/shared/components/Icons/Highrise/highrise.module.css new file mode 100644 index 0000000..ff44382 --- /dev/null +++ b/src/shared/components/Icons/Highrise/highrise.module.css @@ -0,0 +1,3 @@ +.highriseBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Highrise/index.ts b/src/shared/components/Icons/Highrise/index.ts new file mode 100644 index 0000000..32c0dc8 --- /dev/null +++ b/src/shared/components/Icons/Highrise/index.ts @@ -0,0 +1 @@ +export { HighriseSvg } from './Highrise'; diff --git a/src/shared/components/Icons/Icon.tsx b/src/shared/components/Icons/Icon.tsx new file mode 100644 index 0000000..978378f --- /dev/null +++ b/src/shared/components/Icons/Icon.tsx @@ -0,0 +1,356 @@ +import React, { memo, useEffect, useState } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { FilterSvg } from 'Components/Icons/Filter'; +import { CaretUpSvg } from 'Components/Icons/CaretUp'; +import { CaretDownSvg } from 'Components/Icons/CaretDown/CaretDown'; +import { ArrowLeftSvg } from 'Components/Icons/ArrowLeft'; +import { TrashSvg } from 'Components/Icons/Trash'; +import { CarouselControllerSvg } from 'Components/Icons/CarouselController'; +import { SupportSvg } from 'Components/Icons/Support'; +import { HighriseSvg } from 'Components/Icons/Highrise'; +import { ChevronIconsSvg } from 'Components/Icons/ChevronIcons'; +import { DownloadSvg } from 'Components/Icons/Download'; +import { BookmarkSvg } from 'Components/Icons/Bookmark'; +import { SearchSvg } from 'Components/Icons/Search'; +import { CircleSvg } from 'Components/Icons/Circle'; +import { MobileAppSvg } from 'Components/Icons/MobileApp'; +import { CrewSvg } from 'Components/Icons/Crew'; +import { CommercialSvg } from 'Components/Icons/Commercial'; +import { SquareSvg } from 'Components/Icons/Square'; +import { DotSvg } from 'Components/Icons/Dot'; +import { ReportsTypeSvg } from 'Components/Icons/ReportsType'; +import { RadioSvg } from 'Components/Icons/Radio'; +import { AddressBuildingSvg } from './AddressBuilding'; +import { PhoneSvg } from './Phone'; +import { CompanyArrowSvg } from './CompanyArrow'; +import { CubeSvg } from './Cube'; +import { CubePlusSvg } from './CubePlus'; +import { CubePlusLgSvg } from './CubePlusLarge'; +import { PersonSvg } from './Person'; +import { HamburgerMenuSvg } from './HamburgerMenu'; +import { SideBarCloseSvg } from './SideBarClose'; +import { EyeClosedSvg } from './EyeClosed'; +import { EyeSvg } from './Eye'; +import { DropzoneBackgroundSvg } from './DropzoneBackground'; +import { ModalCloseSvg } from './ModalClose'; +import { LogoSvg } from './Logo'; +import { SmsSvg } from './Sms'; +import { EmailSvg } from './Email'; +import { AppleSvg } from './Apple'; +import { FacebookSvg } from './Facebook'; +import { GoogleSvg } from './Google'; +import { CloseSvg } from './Close'; +import { CloseCircleSvg } from './CloseCircle'; +import { SideBarLeftArrowSvg } from './SideBarLeftArrow'; +import { SideBarRightArrowSvg } from './SideBarRightArrow'; +import { DropdownArrowSvg } from './DropdownArrow'; +import { FunnelSvg } from './Funnel'; +import { LogoIconSvg } from './LogoIcon'; +import { DashboardSvg } from './Dashboard'; +import { ProjectsSvg } from './Projects'; +import { PeopleSvg, PeoplePinkSvg } from './People'; +import { ThreeDotsSvg } from './ThreeDots'; +import { PlusSvg } from './Plus'; +import { RocketEmblemSvg } from './RocketEmblem'; +import { SingleHomeSvg } from './SingleHome'; +import { HandSvg } from './Hand'; +import { BathRoomSvg } from './BathRoom'; +import { BedRoomSvg } from './BedRoom'; +import { DenSvg } from './Den'; +import { DiningRoomSvg } from './DiningRoom'; +import { EnsuiteSvg } from './Ensuite'; +import { KitchenSvg } from './Kitchen'; +import { LaundrySvg } from './Laundry'; +import { LivingRoomSvg } from './LivingRoom'; +import { UnitSvg } from './Unit'; +import { FloorSvg } from './Floor'; +import { HallwaySvg } from './Hallway'; +import { StairwaySvg } from './Stairway'; +import { ElevatorSvg } from './Elevator'; +import { LobbySvg } from './Lobby'; +import { StorageSvg } from './Storage'; +import { GymSvg } from './Gym'; +import { ElectricalRoomSvg } from './ElectricalRoom'; +import { ActionsDefaultSvg } from './ActionsDefault'; +import { ActionsPurpleSvg } from './ActionsPurple'; +import { PhotoShareSvg } from './PhotoShare'; +import { LogoMobileSvg } from './LogoMobile'; +import { WelcomeAboardSvg } from './WelcomeAboard'; +import { NoCompanySvg } from './NoCompany'; +import { PinSvg } from './Pin'; +import { PinActiveSvg } from './PinActive'; +import { NotFoundSvg } from './NotFound'; +import { EmployeePhoneSvg } from './EmployeePhone'; +import { LinkSvg } from './Link'; +import { CopySvg } from './Copy'; +import { CustomRoomSvg } from './CustomRoom'; +import { AddButtonSvg } from './AddButton'; +import { EditSvg } from './Edit'; +import { CheckedMarkSvg } from './CheckedMark'; +import { ConfirmCheckedSvg } from './ConfirmChecked'; +import { ReceptionSvg } from './Reception'; +import { OfficeSvg } from './Office'; +import { PrivateOfficeSvg } from './PrivateOffice'; +import { MeetingRoomSvg } from './MeetingRoom'; +import { MaintenanceRoomSvg } from './MaintenanceRoom'; +import { LunchRoomSvg } from './LunchRoom'; +import { LinkOpenSvg } from './LinkOpen'; +import { FlagSvg } from './Flag'; +import { PhotoNoteSvg } from './PhotoNote'; +import { OfficeBuildingSvg } from './OfficeBuilding'; +import { CountryFlagSvg } from './CountryFlag'; +import { PhotoBookmarkSvg } from './PhotoBookmark'; +import { PhotoFlagSvg } from './PhotoFlag'; +import { BasementSvg, CompassSvg, GarageSvg, PlazaSvg, PoolSvg, RoofSvg, ShopSvg, UtilityRoomSvg } from './RoomTypes'; +import { MultiUnitSvg } from './MultiUnit'; +import { ExteriorSvg } from './Exterior'; +import { GalleryPlaceholderSvg } from './GalleryPlaceholder'; +import { ShareSvg } from './Share'; +import { LandScapeSvg } from './LandScape'; +import { CheckboxSvg } from './Checkbox'; +import { InfoSvg } from './Info'; +import { EquipmentSvg } from './Equipment'; +import { MoistureSvg } from './Moisture'; +import { DehumidifierSvg } from './Dehumidifier'; +import { AirMoverSvg } from './AirMover'; +import { DryingMatSvg } from './DryingMat'; +import { AirScrubberSvg } from './AirScrubber'; +import { InjectDryerSvg } from './InjectDryer'; + +interface Props { + type: string; + id?: string; + className?: string; + fill?: string; + events?: any; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const getIcon = (type, className, id, fill, onClick, onKeyUp) => { + const icons = { + logo: , + logoicon: , + logomobile: , + sms: , + email: , + apple: , + facebook: , + google: , + close: , + closeplainsm: , + closecircle: , + sidebarleftarrow: , + sidebarrightarrow: , + dropdownarrow: , + funnel: , + dashboard: , + projects: , + phone: , + plus: , + person: , + personpurple: , + people: , + peoplepink: , + peoplepinksmall: , + threedots: , + addressbuilding: , + companyarrow: , + hamburgermenu: , + sidebarclose: , + eye: , + eyeclosed: , + cube: , + cubeplus: , + cubepluslg: , + hand: , + bathroom: , // to be removed + bedroom: , // to be removed + masterbedroom: , // to be removed + den: , // to be removed + diningroom: , // to be removed + ensuite: , // to be removed + kitchen: , // to be removed + walkway: , // to be removed + laundry: , // to be removed + livingroom: , // to be removed + dropzonebackground: , + singlehome: , + singlehomesm: , + highrise: , + highrisesmall: , + modalclose: , + multiunit: , + filter: , + caretup: , + caretdown: , + unit: , + unitsm: , + unitlg: , + unitadd: , + floor: , + floorsm: , + flooradd: , + rocketemblem: , + rocketemblemtwo: , + rocketemblemthree: , + rocketemblemsmall: , + trash: , + trashsm: , + trashsmdisabled: , + trashsmdark: , + trashphoto: , + trashmd: , + arrowleft: , + hallway: , // to be removed + stairway: , // to be removed + elevator: , // to be removed + lobby: , // to be removed + storage: , // to be removed + bay: , // to be removed + mailroom: , // to be removed + gym: , // to be removed + electricalroom: , // to be removed + actionsdefault: , + actionspurple: , + photoshareerror: , + photoshare: , + welcomeaboard: , + nocompany: , + pin: , + pinactive: , + notfound: , + employeephone: , + link: , + copy: , + edit: , + editsm: , + editmd: , + confirm: , + confirmsm: , + confirmpurple: , + checkmark: , + checkmarkpurplebg: , + reception: , // to be removed + office: , // to be removed + privateoffice: , // to be removed + meetingroom: , // to be removed + maintenanceroom: , // to be removed + lunchroom: , // to be removed + barbequearea: , // to be removed + flag: , + flagpurple: , + flagoutlinepurple: , + flagphoto: , + flaggedphoto: , + customroom: , // to be removed + addbutton: , + addbuttonsm: , + usa: , + canada: , + uk: , + nz: , + aus: , + pool: , // to be removed + garage: , // to be removed + parkinggarage: , // to be removed + shed: , // to be removed + basement: , // to be removed + machineroom: , // to be removed + shop: , // to be removed + storefront: , // to be removed + utilityroom: , // to be removed + plaza: , // to be removed + courtyard: , // to be removed + roof: , // to be removed + rooftop: , // to be removed + northfacing: , // to be removed + southfacing: , // to be removed + eastfacing: , // to be removed + westfacing: , // to be removed + carouselcontrollernext: ( + + ), + carouselcontrollerprev: ( + + ), + support: , + chevronprevious: , + chevronnext: , + download: , + downloadpurple: , + linkopen: , + photonote: , + photoflag: , + photobookmark: , + bookmark: , + bookmarkpurple: , + bookmarkoutlinepurple: ( + + ), + bookmarkphoto: , + bookmarkedphoto: ( + + ), + officebuilding: , + exterior: , + exterioradd: , + mobileapp: , + crew: , + search: , + circle: , + circle16: , + commercial: , + galleryplaceholder: , + share: , + share32: , + landscape: , + checkbox: , + square: , + dot: , + reportscompact: , + reportsexpanded: , + reportslarge: , + radio: , + info: , + equipment: , + moisture: , + dehumidifier: , + airmover: , + dryingmat: , + airscrubber: , + injectdryer: , + }; + + // return null to avoid errors in case if the icon type is not present in the icons list + return icons[type] || null; +}; + +const Icon = ({ className, id, fill = '', onClick, onKeyUp, type }: Props) => { + const [icon, setIcon] = useState(null); + + useEffect(() => { + if (type) { + // Remove all white space from the string, with the regex + const iconType = type.toLocaleLowerCase().replace(/\s+/g, ''); + + // set the icon based on icon type change, useful for conditional icon renderings + setIcon(getIcon(iconType, className, id, fill, onClick, onKeyUp)); + } + }, [type, className]); + + return icon; +}; + +Icon.defaultProps = { + id: undefined, + className: undefined, + fill: undefined, + events: undefined, +}; + +const IconMemo = memo(Icon, areEqual); + +export { IconMemo as Icon }; diff --git a/src/shared/components/Icons/Info/Info.tsx b/src/shared/components/Icons/Info/Info.tsx new file mode 100644 index 0000000..352f293 --- /dev/null +++ b/src/shared/components/Icons/Info/Info.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Info from '../../../Assets/info.svg'; + +// Custom css +import classes from './info.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const InfoSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +InfoSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const InfoSvgMemo = memo(InfoSvg, areEqualShallow); +export { InfoSvgMemo as InfoSvg }; diff --git a/src/shared/components/Icons/Info/index.ts b/src/shared/components/Icons/Info/index.ts new file mode 100644 index 0000000..84eb9ab --- /dev/null +++ b/src/shared/components/Icons/Info/index.ts @@ -0,0 +1 @@ +export { InfoSvg } from './Info'; diff --git a/src/shared/components/Icons/Info/info.module.css b/src/shared/components/Icons/Info/info.module.css new file mode 100644 index 0000000..7a9a690 --- /dev/null +++ b/src/shared/components/Icons/Info/info.module.css @@ -0,0 +1,4 @@ +.iconBase { + cursor: pointer; + pointer-events: none; +} diff --git a/src/shared/components/Icons/InjectDryer/InjectDryer.tsx b/src/shared/components/Icons/InjectDryer/InjectDryer.tsx new file mode 100644 index 0000000..9e7eefb --- /dev/null +++ b/src/shared/components/Icons/InjectDryer/InjectDryer.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import InjectDryer from '../../../Assets/inject-dryer.svg'; + +// Custom css +import classes from './injectDryer.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const InjectDryerSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +InjectDryerSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const InjectDryerSvgMemo = memo(InjectDryerSvg, areEqualShallow); +export { InjectDryerSvgMemo as InjectDryerSvg }; diff --git a/src/shared/components/Icons/InjectDryer/index.ts b/src/shared/components/Icons/InjectDryer/index.ts new file mode 100644 index 0000000..66d032f --- /dev/null +++ b/src/shared/components/Icons/InjectDryer/index.ts @@ -0,0 +1 @@ +export { InjectDryerSvg } from './InjectDryer'; diff --git a/src/shared/components/Icons/InjectDryer/injectDryer.module.css b/src/shared/components/Icons/InjectDryer/injectDryer.module.css new file mode 100644 index 0000000..59dc780 --- /dev/null +++ b/src/shared/components/Icons/InjectDryer/injectDryer.module.css @@ -0,0 +1,3 @@ +.injectDryerBase { + cursor: default; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Kitchen/Kitchen.tsx b/src/shared/components/Icons/Kitchen/Kitchen.tsx new file mode 100644 index 0000000..f76abdf --- /dev/null +++ b/src/shared/components/Icons/Kitchen/Kitchen.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Kitchen from "../../../Assets/kitchen.svg"; + +// Custom css +import classes from "./kitchen.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const KitchenSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +KitchenSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const KitchenSvgMemo = memo(KitchenSvg, areEqualShallow); +export { KitchenSvgMemo as KitchenSvg }; diff --git a/src/shared/components/Icons/Kitchen/index.ts b/src/shared/components/Icons/Kitchen/index.ts new file mode 100644 index 0000000..80bd9ce --- /dev/null +++ b/src/shared/components/Icons/Kitchen/index.ts @@ -0,0 +1 @@ +export { KitchenSvg } from "./Kitchen"; diff --git a/src/shared/components/Icons/Kitchen/kitchen.module.css b/src/shared/components/Icons/Kitchen/kitchen.module.css new file mode 100644 index 0000000..c6a9e52 --- /dev/null +++ b/src/shared/components/Icons/Kitchen/kitchen.module.css @@ -0,0 +1,3 @@ +.kitchenBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/LandScape/LandScape.tsx b/src/shared/components/Icons/LandScape/LandScape.tsx new file mode 100644 index 0000000..7c184a6 --- /dev/null +++ b/src/shared/components/Icons/LandScape/LandScape.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import LandScape from '../../../Assets/landscape.svg'; + +import classes from './landscape.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const LandScapeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LandScapeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LandScapeSvgMemo = memo(LandScapeSvg, areEqualShallow); +export { LandScapeSvgMemo as LandScapeSvg }; diff --git a/src/shared/components/Icons/LandScape/index.ts b/src/shared/components/Icons/LandScape/index.ts new file mode 100644 index 0000000..bcdff72 --- /dev/null +++ b/src/shared/components/Icons/LandScape/index.ts @@ -0,0 +1 @@ +export { LandScapeSvg } from './LandScape'; diff --git a/src/shared/components/Icons/LandScape/landscape.module.css b/src/shared/components/Icons/LandScape/landscape.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/shared/components/Icons/Laundry/Laundry.tsx b/src/shared/components/Icons/Laundry/Laundry.tsx new file mode 100644 index 0000000..d78374c --- /dev/null +++ b/src/shared/components/Icons/Laundry/Laundry.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Laundry from "../../../Assets/laundry.svg"; + +// Custom css +import classes from "./laundry.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LaundrySvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +LaundrySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LaundrySvgMemo = memo(LaundrySvg, areEqualShallow); +export { LaundrySvgMemo as LaundrySvg }; diff --git a/src/shared/components/Icons/Laundry/index.ts b/src/shared/components/Icons/Laundry/index.ts new file mode 100644 index 0000000..bd71a77 --- /dev/null +++ b/src/shared/components/Icons/Laundry/index.ts @@ -0,0 +1 @@ +export { LaundrySvg } from "./Laundry"; diff --git a/src/shared/components/Icons/Laundry/laundry.module.css b/src/shared/components/Icons/Laundry/laundry.module.css new file mode 100644 index 0000000..a5587c1 --- /dev/null +++ b/src/shared/components/Icons/Laundry/laundry.module.css @@ -0,0 +1,3 @@ +.laundryBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Link/Link.tsx b/src/shared/components/Icons/Link/Link.tsx new file mode 100644 index 0000000..607898c --- /dev/null +++ b/src/shared/components/Icons/Link/Link.tsx @@ -0,0 +1,24 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Link from '../../../Assets/link.svg'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LinkSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LinkSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LinkSvgMemo = memo(LinkSvg, areEqualShallow); +export { LinkSvgMemo as LinkSvg }; diff --git a/src/shared/components/Icons/Link/index.ts b/src/shared/components/Icons/Link/index.ts new file mode 100644 index 0000000..471141c --- /dev/null +++ b/src/shared/components/Icons/Link/index.ts @@ -0,0 +1 @@ +export { LinkSvg } from './Link'; diff --git a/src/shared/components/Icons/LinkOpen/LinkOpen.tsx b/src/shared/components/Icons/LinkOpen/LinkOpen.tsx new file mode 100644 index 0000000..3a4889c --- /dev/null +++ b/src/shared/components/Icons/LinkOpen/LinkOpen.tsx @@ -0,0 +1,26 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import LinkOpen from '../../../Assets/link-open.svg'; + +import classes from './linkOpen.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LinkOpenSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LinkOpenSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LinkOpenSvgMemo = memo(LinkOpenSvg, areEqualShallow); +export { LinkOpenSvgMemo as LinkOpenSvg }; diff --git a/src/shared/components/Icons/LinkOpen/index.ts b/src/shared/components/Icons/LinkOpen/index.ts new file mode 100644 index 0000000..cbbef10 --- /dev/null +++ b/src/shared/components/Icons/LinkOpen/index.ts @@ -0,0 +1 @@ +export { LinkOpenSvg } from './LinkOpen'; diff --git a/src/shared/components/Icons/LinkOpen/linkOpen.module.css b/src/shared/components/Icons/LinkOpen/linkOpen.module.css new file mode 100644 index 0000000..b363ede --- /dev/null +++ b/src/shared/components/Icons/LinkOpen/linkOpen.module.css @@ -0,0 +1,3 @@ +.linkOpenBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/LivingRoom/LivingRoom.tsx b/src/shared/components/Icons/LivingRoom/LivingRoom.tsx new file mode 100644 index 0000000..69b6948 --- /dev/null +++ b/src/shared/components/Icons/LivingRoom/LivingRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import LivingRoom from "../../../Assets/living-room.svg"; + +// Custom css +import classes from "./livingRoom.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LivingRoomSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +LivingRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LivingRoomSvgMemo = memo(LivingRoomSvg, areEqualShallow); +export { LivingRoomSvgMemo as LivingRoomSvg }; diff --git a/src/shared/components/Icons/LivingRoom/index.ts b/src/shared/components/Icons/LivingRoom/index.ts new file mode 100644 index 0000000..99f99d9 --- /dev/null +++ b/src/shared/components/Icons/LivingRoom/index.ts @@ -0,0 +1 @@ +export { LivingRoomSvg } from "./LivingRoom"; diff --git a/src/shared/components/Icons/LivingRoom/livingRoom.module.css b/src/shared/components/Icons/LivingRoom/livingRoom.module.css new file mode 100644 index 0000000..52bafa7 --- /dev/null +++ b/src/shared/components/Icons/LivingRoom/livingRoom.module.css @@ -0,0 +1,3 @@ +.livingRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Lobby/Lobby.tsx b/src/shared/components/Icons/Lobby/Lobby.tsx new file mode 100644 index 0000000..25dab44 --- /dev/null +++ b/src/shared/components/Icons/Lobby/Lobby.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Lobby from "../../../Assets/lobby.svg"; + +// Custom css +import classes from "./lobby.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LobbySvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +LobbySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LobbySvgMemo = memo(LobbySvg, areEqualShallow); +export { LobbySvgMemo as LobbySvg }; diff --git a/src/shared/components/Icons/Lobby/index.ts b/src/shared/components/Icons/Lobby/index.ts new file mode 100644 index 0000000..9ccf4b2 --- /dev/null +++ b/src/shared/components/Icons/Lobby/index.ts @@ -0,0 +1 @@ +export { LobbySvg } from "./Lobby"; diff --git a/src/shared/components/Icons/Lobby/lobby.module.css b/src/shared/components/Icons/Lobby/lobby.module.css new file mode 100644 index 0000000..5ae9a47 --- /dev/null +++ b/src/shared/components/Icons/Lobby/lobby.module.css @@ -0,0 +1,3 @@ +.lobbyBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Logo/Logo.tsx b/src/shared/components/Icons/Logo/Logo.tsx new file mode 100644 index 0000000..c906ef9 --- /dev/null +++ b/src/shared/components/Icons/Logo/Logo.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Logo from '../../../Assets/logo.svg'; + +// Custom css +import classes from './logo.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LogoSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LogoSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LogoSvgMemo = memo(LogoSvg, areEqualShallow); +export { LogoSvgMemo as LogoSvg }; diff --git a/src/shared/components/Icons/Logo/index.ts b/src/shared/components/Icons/Logo/index.ts new file mode 100644 index 0000000..6071aa0 --- /dev/null +++ b/src/shared/components/Icons/Logo/index.ts @@ -0,0 +1 @@ +export { LogoSvg } from './Logo'; diff --git a/src/shared/components/Icons/Logo/logo.module.css b/src/shared/components/Icons/Logo/logo.module.css new file mode 100644 index 0000000..8d666f5 --- /dev/null +++ b/src/shared/components/Icons/Logo/logo.module.css @@ -0,0 +1,3 @@ +.logoBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/LogoIcon/LogoIcon.tsx b/src/shared/components/Icons/LogoIcon/LogoIcon.tsx new file mode 100644 index 0000000..ff2c4a8 --- /dev/null +++ b/src/shared/components/Icons/LogoIcon/LogoIcon.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import LogoIcon from '../../../Assets/logo-icon.svg'; + +// Custom css +import classes from './logoIcon.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LogoIconSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LogoIconSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LogoIconSvgMemo = memo(LogoIconSvg, areEqualShallow); +export { LogoIconSvgMemo as LogoIconSvg }; diff --git a/src/shared/components/Icons/LogoIcon/index.ts b/src/shared/components/Icons/LogoIcon/index.ts new file mode 100644 index 0000000..477995e --- /dev/null +++ b/src/shared/components/Icons/LogoIcon/index.ts @@ -0,0 +1 @@ +export { LogoIconSvg } from './LogoIcon'; diff --git a/src/shared/components/Icons/LogoIcon/logoIcon.module.css b/src/shared/components/Icons/LogoIcon/logoIcon.module.css new file mode 100644 index 0000000..ab91373 --- /dev/null +++ b/src/shared/components/Icons/LogoIcon/logoIcon.module.css @@ -0,0 +1,3 @@ +.logoIconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/LogoMobile/LogoMobile.tsx b/src/shared/components/Icons/LogoMobile/LogoMobile.tsx new file mode 100644 index 0000000..0be67cd --- /dev/null +++ b/src/shared/components/Icons/LogoMobile/LogoMobile.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import LogoMobile from "../../../Assets/logo-mobile.svg"; + +// Custom css +import classes from "./logoMobile.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LogoMobileSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +LogoMobileSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LogoMobileSvgMemo = memo(LogoMobileSvg, areEqualShallow); +export { LogoMobileSvgMemo as LogoMobileSvg }; diff --git a/src/shared/components/Icons/LogoMobile/index.ts b/src/shared/components/Icons/LogoMobile/index.ts new file mode 100644 index 0000000..6e47ba2 --- /dev/null +++ b/src/shared/components/Icons/LogoMobile/index.ts @@ -0,0 +1 @@ +export { LogoMobileSvg } from "./LogoMobile"; diff --git a/src/shared/components/Icons/LogoMobile/logoMobile.module.css b/src/shared/components/Icons/LogoMobile/logoMobile.module.css new file mode 100644 index 0000000..f43c2c4 --- /dev/null +++ b/src/shared/components/Icons/LogoMobile/logoMobile.module.css @@ -0,0 +1,3 @@ +.logoMobileBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/LunchRoom/LunchRoom.tsx b/src/shared/components/Icons/LunchRoom/LunchRoom.tsx new file mode 100644 index 0000000..19c288b --- /dev/null +++ b/src/shared/components/Icons/LunchRoom/LunchRoom.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import LunchRoom from '../../../Assets/lunchroom.svg'; + +// Custom css +import classes from './lunchRoom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const LunchRoomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +LunchRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const LunchRoomSvgMemo = memo(LunchRoomSvg, areEqualShallow); +export { LunchRoomSvgMemo as LunchRoomSvg }; diff --git a/src/shared/components/Icons/LunchRoom/index.ts b/src/shared/components/Icons/LunchRoom/index.ts new file mode 100644 index 0000000..3c3693f --- /dev/null +++ b/src/shared/components/Icons/LunchRoom/index.ts @@ -0,0 +1 @@ +export { LunchRoomSvg } from './LunchRoom'; diff --git a/src/shared/components/Icons/LunchRoom/lunchRoom.module.css b/src/shared/components/Icons/LunchRoom/lunchRoom.module.css new file mode 100644 index 0000000..5780465 --- /dev/null +++ b/src/shared/components/Icons/LunchRoom/lunchRoom.module.css @@ -0,0 +1,3 @@ +.lunchRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/MaintenanceRoom/MaintenanceRoom.tsx b/src/shared/components/Icons/MaintenanceRoom/MaintenanceRoom.tsx new file mode 100644 index 0000000..e6c9561 --- /dev/null +++ b/src/shared/components/Icons/MaintenanceRoom/MaintenanceRoom.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import MaintenanceRoom from '../../../Assets/maintenance-room.svg'; + +// Custom css +import classes from './maintenanceRoom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MaintenanceRoomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MaintenanceRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MaintenanceRoomSvgMemo = memo(MaintenanceRoomSvg, areEqualShallow); +export { MaintenanceRoomSvgMemo as MaintenanceRoomSvg }; diff --git a/src/shared/components/Icons/MaintenanceRoom/index.ts b/src/shared/components/Icons/MaintenanceRoom/index.ts new file mode 100644 index 0000000..d869256 --- /dev/null +++ b/src/shared/components/Icons/MaintenanceRoom/index.ts @@ -0,0 +1 @@ +export { MaintenanceRoomSvg } from './MaintenanceRoom'; diff --git a/src/shared/components/Icons/MaintenanceRoom/maintenanceRoom.module.css b/src/shared/components/Icons/MaintenanceRoom/maintenanceRoom.module.css new file mode 100644 index 0000000..5ad9552 --- /dev/null +++ b/src/shared/components/Icons/MaintenanceRoom/maintenanceRoom.module.css @@ -0,0 +1,3 @@ +.maintenanceRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/MeetingRoom/MeetingRoom.tsx b/src/shared/components/Icons/MeetingRoom/MeetingRoom.tsx new file mode 100644 index 0000000..8495eb1 --- /dev/null +++ b/src/shared/components/Icons/MeetingRoom/MeetingRoom.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import MeetingRoom from '../../../Assets/meeting-room.svg'; + +// Custom css +import classes from './meetingRoom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MeetingRoomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MeetingRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MeetingRoomSvgMemo = memo(MeetingRoomSvg, areEqualShallow); +export { MeetingRoomSvgMemo as MeetingRoomSvg }; diff --git a/src/shared/components/Icons/MeetingRoom/index.ts b/src/shared/components/Icons/MeetingRoom/index.ts new file mode 100644 index 0000000..12ce3e0 --- /dev/null +++ b/src/shared/components/Icons/MeetingRoom/index.ts @@ -0,0 +1 @@ +export { MeetingRoomSvg } from './MeetingRoom'; diff --git a/src/shared/components/Icons/MeetingRoom/meetingRoom.module.css b/src/shared/components/Icons/MeetingRoom/meetingRoom.module.css new file mode 100644 index 0000000..acf3d7d --- /dev/null +++ b/src/shared/components/Icons/MeetingRoom/meetingRoom.module.css @@ -0,0 +1,3 @@ +.meetingRoomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/MobileApp/MobileApp.tsx b/src/shared/components/Icons/MobileApp/MobileApp.tsx new file mode 100644 index 0000000..d2b810a --- /dev/null +++ b/src/shared/components/Icons/MobileApp/MobileApp.tsx @@ -0,0 +1,24 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import MobileApp from '../../../Assets/mobile-app-icon.svg'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MobileAppSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MobileAppSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MobileAppSvgMemo = memo(MobileAppSvg, areEqualShallow); +export { MobileAppSvgMemo as MobileAppSvg }; diff --git a/src/shared/components/Icons/MobileApp/index.ts b/src/shared/components/Icons/MobileApp/index.ts new file mode 100644 index 0000000..b78e805 --- /dev/null +++ b/src/shared/components/Icons/MobileApp/index.ts @@ -0,0 +1 @@ +export { MobileAppSvg } from './MobileApp'; diff --git a/src/shared/components/Icons/ModalClose/ModalClose.tsx b/src/shared/components/Icons/ModalClose/ModalClose.tsx new file mode 100644 index 0000000..eff4c9b --- /dev/null +++ b/src/shared/components/Icons/ModalClose/ModalClose.tsx @@ -0,0 +1,28 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import ModalClose from "../../../Assets/modal-close.svg"; + +// Custom css +import classes from "./modalClose.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const ModalCloseSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +ModalCloseSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ModalCloseSvgMemo = memo(ModalCloseSvg, areEqualShallow); +export { ModalCloseSvgMemo as ModalCloseSvg }; diff --git a/src/shared/components/Icons/ModalClose/index.ts b/src/shared/components/Icons/ModalClose/index.ts new file mode 100644 index 0000000..8bc96fa --- /dev/null +++ b/src/shared/components/Icons/ModalClose/index.ts @@ -0,0 +1 @@ +export { ModalCloseSvg } from "./ModalClose"; diff --git a/src/shared/components/Icons/ModalClose/modalClose.module.css b/src/shared/components/Icons/ModalClose/modalClose.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/ModalClose/modalClose.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Moisture/Moisture.tsx b/src/shared/components/Icons/Moisture/Moisture.tsx new file mode 100644 index 0000000..8516b9c --- /dev/null +++ b/src/shared/components/Icons/Moisture/Moisture.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Moisture from '../../../Assets/moisture-log.svg'; + +// Custom css +import classes from './moisture.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MoistureSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MoistureSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MoistureSvgMemo = memo(MoistureSvg, areEqualShallow); +export { MoistureSvgMemo as MoistureSvg }; diff --git a/src/shared/components/Icons/Moisture/index.ts b/src/shared/components/Icons/Moisture/index.ts new file mode 100644 index 0000000..c9e314e --- /dev/null +++ b/src/shared/components/Icons/Moisture/index.ts @@ -0,0 +1 @@ +export { MoistureSvg } from './Moisture'; diff --git a/src/shared/components/Icons/Moisture/moisture.module.css b/src/shared/components/Icons/Moisture/moisture.module.css new file mode 100644 index 0000000..330826e --- /dev/null +++ b/src/shared/components/Icons/Moisture/moisture.module.css @@ -0,0 +1,3 @@ +.moistureBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/MultiUnit/MultiUnit.tsx b/src/shared/components/Icons/MultiUnit/MultiUnit.tsx new file mode 100644 index 0000000..fd6c754 --- /dev/null +++ b/src/shared/components/Icons/MultiUnit/MultiUnit.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import MultiUnit from '../../../Assets/multiunit-lg.svg'; + +// Custom css +import classes from './multiunit.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const MultiUnitSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +MultiUnitSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const MultiUnitSvgMemo = memo(MultiUnitSvg, areEqualShallow); +export { MultiUnitSvgMemo as MultiUnitSvg }; diff --git a/src/shared/components/Icons/MultiUnit/index.ts b/src/shared/components/Icons/MultiUnit/index.ts new file mode 100644 index 0000000..b48e61c --- /dev/null +++ b/src/shared/components/Icons/MultiUnit/index.ts @@ -0,0 +1 @@ +export { MultiUnitSvg } from './MultiUnit'; diff --git a/src/shared/components/Icons/MultiUnit/multiunit.module.css b/src/shared/components/Icons/MultiUnit/multiunit.module.css new file mode 100644 index 0000000..b8bca37 --- /dev/null +++ b/src/shared/components/Icons/MultiUnit/multiunit.module.css @@ -0,0 +1,4 @@ +.multiunitBase { + cursor: pointer; + height: 82px; +} diff --git a/src/shared/components/Icons/NoCompany/NoCompany.tsx b/src/shared/components/Icons/NoCompany/NoCompany.tsx new file mode 100644 index 0000000..bd78c92 --- /dev/null +++ b/src/shared/components/Icons/NoCompany/NoCompany.tsx @@ -0,0 +1,18 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import NoCompany from "../../../Assets/no-company.svg"; + +interface Props { + className?: string; + id?: string; +} +const NoCompanySvg = ({ className = "", id }: Props) => ; + +NoCompanySvg.defaultProps = { + className: undefined, + id: undefined, +}; + +const NoCompanySvgMemo = memo(NoCompanySvg, areEqualShallow); +export { NoCompanySvgMemo as NoCompanySvg }; diff --git a/src/shared/components/Icons/NoCompany/index.ts b/src/shared/components/Icons/NoCompany/index.ts new file mode 100644 index 0000000..ab0394e --- /dev/null +++ b/src/shared/components/Icons/NoCompany/index.ts @@ -0,0 +1 @@ +export { NoCompanySvg } from "./NoCompany"; diff --git a/src/shared/components/Icons/NotFound/NotFound.tsx b/src/shared/components/Icons/NotFound/NotFound.tsx new file mode 100644 index 0000000..159b42e --- /dev/null +++ b/src/shared/components/Icons/NotFound/NotFound.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import NotFound from '../../../Assets/not-found.svg'; + +interface Props { + className?: string; + id?: string; +} +const NotFoundSvg = ({ className = '', id }: Props) => ; + +NotFoundSvg.defaultProps = { + className: undefined, + id: undefined, +}; + +const NotFoundSvgMemo = memo(NotFoundSvg, areEqualShallow); +export { NotFoundSvgMemo as NotFoundSvg }; diff --git a/src/shared/components/Icons/NotFound/index.ts b/src/shared/components/Icons/NotFound/index.ts new file mode 100644 index 0000000..2787944 --- /dev/null +++ b/src/shared/components/Icons/NotFound/index.ts @@ -0,0 +1 @@ +export { NotFoundSvg } from './NotFound'; diff --git a/src/shared/components/Icons/Office/Office.tsx b/src/shared/components/Icons/Office/Office.tsx new file mode 100644 index 0000000..9c2be02 --- /dev/null +++ b/src/shared/components/Icons/Office/Office.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Office from '../../../Assets/office.svg'; + +// Custom css +import classes from './office.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const OfficeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +OfficeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const OfficeSvgMemo = memo(OfficeSvg, areEqualShallow); +export { OfficeSvgMemo as OfficeSvg }; diff --git a/src/shared/components/Icons/Office/index.ts b/src/shared/components/Icons/Office/index.ts new file mode 100644 index 0000000..df981af --- /dev/null +++ b/src/shared/components/Icons/Office/index.ts @@ -0,0 +1 @@ +export { OfficeSvg } from './Office'; diff --git a/src/shared/components/Icons/Office/office.module.css b/src/shared/components/Icons/Office/office.module.css new file mode 100644 index 0000000..81f9204 --- /dev/null +++ b/src/shared/components/Icons/Office/office.module.css @@ -0,0 +1,3 @@ +.officeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/OfficeBuilding/OfficeBuilding.tsx b/src/shared/components/Icons/OfficeBuilding/OfficeBuilding.tsx new file mode 100644 index 0000000..032c8b9 --- /dev/null +++ b/src/shared/components/Icons/OfficeBuilding/OfficeBuilding.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Office from '../../../Assets/office-building.svg'; + +// Custom css +import classes from './officeBuilding.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const OfficeBuildingSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +OfficeBuildingSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const OfficeBuildingSvgMemo = memo(OfficeBuildingSvg, areEqualShallow); +export { OfficeBuildingSvgMemo as OfficeBuildingSvg }; diff --git a/src/shared/components/Icons/OfficeBuilding/index.ts b/src/shared/components/Icons/OfficeBuilding/index.ts new file mode 100644 index 0000000..89665df --- /dev/null +++ b/src/shared/components/Icons/OfficeBuilding/index.ts @@ -0,0 +1 @@ +export { OfficeBuildingSvg } from './OfficeBuilding'; diff --git a/src/shared/components/Icons/OfficeBuilding/officeBuilding.module.css b/src/shared/components/Icons/OfficeBuilding/officeBuilding.module.css new file mode 100644 index 0000000..4cbc6c8 --- /dev/null +++ b/src/shared/components/Icons/OfficeBuilding/officeBuilding.module.css @@ -0,0 +1,3 @@ +.officeBuildingBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/People/People.tsx b/src/shared/components/Icons/People/People.tsx new file mode 100644 index 0000000..23b4783 --- /dev/null +++ b/src/shared/components/Icons/People/People.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import People from '../../../Assets/people.svg'; + +// Custom css +import classes from './people.module.css'; + +interface Props { + className?: string; + fill: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PeopleSvg = ({ className = '', fill = '#5B476B', id, onClick, onKeyUp }: Props) => ( + +); + +PeopleSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PeopleSvgMemo = memo(PeopleSvg, areEqualShallow); +export { PeopleSvgMemo as PeopleSvg }; diff --git a/src/shared/components/Icons/People/PeoplePink/PeoplePink.tsx b/src/shared/components/Icons/People/PeoplePink/PeoplePink.tsx new file mode 100644 index 0000000..7ad755e --- /dev/null +++ b/src/shared/components/Icons/People/PeoplePink/PeoplePink.tsx @@ -0,0 +1,61 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PeoplePink from '../../../../Assets/people-pink.svg'; +import PeoplePinkSmall from '../../../../Assets/people-pink-small.svg'; +import PeoplePinkMedium from '../../../../Assets/people-pink-medium.svg'; + +// Custom css +import classes from './peoplePink.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; + iconType?: string; +} +const PeoplePinkSvg = ({ className = '', id, onClick, onKeyUp, iconType }: Props) => { + switch (iconType) { + case 'peoplepinksmall': + return ( + + ); + + case 'peoplepinkmedium': + return ( + + ); + + default: + return ( + + ); + } +}; + +PeoplePinkSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, + iconType: 'people', +}; + +const PeoplePinkMemo = memo(PeoplePinkSvg, areEqualShallow); +export { PeoplePinkMemo as PeoplePinkSvg }; diff --git a/src/shared/components/Icons/People/PeoplePink/index.ts b/src/shared/components/Icons/People/PeoplePink/index.ts new file mode 100644 index 0000000..3b7a55b --- /dev/null +++ b/src/shared/components/Icons/People/PeoplePink/index.ts @@ -0,0 +1 @@ +export { PeoplePinkSvg } from './PeoplePink'; diff --git a/src/shared/components/Icons/People/PeoplePink/peoplePink.module.css b/src/shared/components/Icons/People/PeoplePink/peoplePink.module.css new file mode 100644 index 0000000..108e58a --- /dev/null +++ b/src/shared/components/Icons/People/PeoplePink/peoplePink.module.css @@ -0,0 +1,3 @@ +.peoplePinkBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/People/index.ts b/src/shared/components/Icons/People/index.ts new file mode 100644 index 0000000..c557fd7 --- /dev/null +++ b/src/shared/components/Icons/People/index.ts @@ -0,0 +1,2 @@ +export { PeopleSvg } from './People'; +export { PeoplePinkSvg } from './PeoplePink'; diff --git a/src/shared/components/Icons/People/people.module.css b/src/shared/components/Icons/People/people.module.css new file mode 100644 index 0000000..525c079 --- /dev/null +++ b/src/shared/components/Icons/People/people.module.css @@ -0,0 +1,3 @@ +.peopleBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Person/Person.tsx b/src/shared/components/Icons/Person/Person.tsx new file mode 100644 index 0000000..025a4f2 --- /dev/null +++ b/src/shared/components/Icons/Person/Person.tsx @@ -0,0 +1,46 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Person from '../../../Assets/person.svg'; +import PersonPurple from '../../../Assets/person-purple.svg'; + +// Custom css +import classes from './person.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const PersonSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'personpurple': + return ( + + ); + default: + return ( + + ); + } +}; + +PersonSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 'person', + onClick: undefined, + onKeyUp: undefined, +}; + +const PersonSvgMemo = memo(PersonSvg, areEqualShallow); + +export { PersonSvgMemo as PersonSvg }; diff --git a/src/shared/components/Icons/Person/index.ts b/src/shared/components/Icons/Person/index.ts new file mode 100644 index 0000000..3e16d3b --- /dev/null +++ b/src/shared/components/Icons/Person/index.ts @@ -0,0 +1 @@ +export { PersonSvg } from './Person'; diff --git a/src/shared/components/Icons/Person/person.module.css b/src/shared/components/Icons/Person/person.module.css new file mode 100644 index 0000000..bacebb0 --- /dev/null +++ b/src/shared/components/Icons/Person/person.module.css @@ -0,0 +1,3 @@ +.personBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Phone/Phone.tsx b/src/shared/components/Icons/Phone/Phone.tsx new file mode 100644 index 0000000..1be2ec0 --- /dev/null +++ b/src/shared/components/Icons/Phone/Phone.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Phone from '../../../Assets/phone.svg'; + +// Custom css +import classes from './phone.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PhoneSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PhoneSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PhoneSvgMemo = memo(PhoneSvg, areEqualShallow); +export { PhoneSvgMemo as PhoneSvg }; diff --git a/src/shared/components/Icons/Phone/index.ts b/src/shared/components/Icons/Phone/index.ts new file mode 100644 index 0000000..392bff6 --- /dev/null +++ b/src/shared/components/Icons/Phone/index.ts @@ -0,0 +1 @@ +export { PhoneSvg } from './Phone'; diff --git a/src/shared/components/Icons/Phone/phone.module.css b/src/shared/components/Icons/Phone/phone.module.css new file mode 100644 index 0000000..4f86721 --- /dev/null +++ b/src/shared/components/Icons/Phone/phone.module.css @@ -0,0 +1,8 @@ +.phoneBase { + text-decoration: none; + font-style: normal; + font-weight: normal; + font-size: 12.003px; + line-height: 20px; + color: #000000 !important; +} diff --git a/src/shared/components/Icons/PhotoBookmark/PhotoBookmark.tsx b/src/shared/components/Icons/PhotoBookmark/PhotoBookmark.tsx new file mode 100644 index 0000000..919e8b7 --- /dev/null +++ b/src/shared/components/Icons/PhotoBookmark/PhotoBookmark.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PhotoBookmark from '../../../Assets/photo-bookmark.svg'; + +// Custom css +import classes from './photoBookmark.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PhotoBookmarkSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PhotoBookmarkSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PhotoBookmarkSvgMemo = memo(PhotoBookmarkSvg, areEqualShallow); +export { PhotoBookmarkSvgMemo as PhotoBookmarkSvg }; diff --git a/src/shared/components/Icons/PhotoBookmark/index.ts b/src/shared/components/Icons/PhotoBookmark/index.ts new file mode 100644 index 0000000..f30f657 --- /dev/null +++ b/src/shared/components/Icons/PhotoBookmark/index.ts @@ -0,0 +1 @@ +export { PhotoBookmarkSvg } from './PhotoBookmark'; diff --git a/src/shared/components/Icons/PhotoBookmark/photoBookmark.module.css b/src/shared/components/Icons/PhotoBookmark/photoBookmark.module.css new file mode 100644 index 0000000..2bd6071 --- /dev/null +++ b/src/shared/components/Icons/PhotoBookmark/photoBookmark.module.css @@ -0,0 +1,3 @@ +.photoBookmarkBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/PhotoFlag/PhotoFlag.tsx b/src/shared/components/Icons/PhotoFlag/PhotoFlag.tsx new file mode 100644 index 0000000..cf5b3fd --- /dev/null +++ b/src/shared/components/Icons/PhotoFlag/PhotoFlag.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PhotoBookmark from '../../../Assets/photo-flag.svg'; + +// Custom css +import classes from './photoFlag.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PhotoFlagSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PhotoFlagSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PhotoFlagSvgMemo = memo(PhotoFlagSvg, areEqualShallow); +export { PhotoFlagSvgMemo as PhotoFlagSvg }; diff --git a/src/shared/components/Icons/PhotoFlag/index.ts b/src/shared/components/Icons/PhotoFlag/index.ts new file mode 100644 index 0000000..2ec8c3b --- /dev/null +++ b/src/shared/components/Icons/PhotoFlag/index.ts @@ -0,0 +1 @@ +export { PhotoFlagSvg } from './PhotoFlag'; diff --git a/src/shared/components/Icons/PhotoFlag/photoFlag.module.css b/src/shared/components/Icons/PhotoFlag/photoFlag.module.css new file mode 100644 index 0000000..94772a3 --- /dev/null +++ b/src/shared/components/Icons/PhotoFlag/photoFlag.module.css @@ -0,0 +1,3 @@ +.photoFlagBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/PhotoNote/PhotoNote.tsx b/src/shared/components/Icons/PhotoNote/PhotoNote.tsx new file mode 100644 index 0000000..af49ab0 --- /dev/null +++ b/src/shared/components/Icons/PhotoNote/PhotoNote.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PhotoNote from '../../../Assets/photo-note.svg'; + +// Custom css +import classes from './photoNote.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PhotoNoteSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PhotoNoteSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PhotoNoteSvgMemo = memo(PhotoNoteSvg, areEqualShallow); +export { PhotoNoteSvgMemo as PhotoNoteSvg }; diff --git a/src/shared/components/Icons/PhotoNote/index.ts b/src/shared/components/Icons/PhotoNote/index.ts new file mode 100644 index 0000000..a88de1b --- /dev/null +++ b/src/shared/components/Icons/PhotoNote/index.ts @@ -0,0 +1 @@ +export { PhotoNoteSvg } from './PhotoNote'; diff --git a/src/shared/components/Icons/PhotoNote/photoNote.module.css b/src/shared/components/Icons/PhotoNote/photoNote.module.css new file mode 100644 index 0000000..0adedc7 --- /dev/null +++ b/src/shared/components/Icons/PhotoNote/photoNote.module.css @@ -0,0 +1,3 @@ +.photoNoteBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/PhotoShare/PhotoShare.tsx b/src/shared/components/Icons/PhotoShare/PhotoShare.tsx new file mode 100644 index 0000000..e0c7ca2 --- /dev/null +++ b/src/shared/components/Icons/PhotoShare/PhotoShare.tsx @@ -0,0 +1,30 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PhotoShare from '../../../Assets/photo-share.svg'; +import PhotoShareError from '../../../Assets/photo-share-error.svg'; + +interface Props { + className?: string; + id?: string; + iconType?: string; +} + +const PhotoShareSvg = ({ className = '', id, iconType }: Props) => { + switch (iconType) { + case 'photoshareerror': + return ; + + default: + return ; + } +}; + +PhotoShareSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 'photoshare', +}; + +const PhotoShareSvgMemo = memo(PhotoShareSvg, areEqualShallow); +export { PhotoShareSvgMemo as PhotoShareSvg }; diff --git a/src/shared/components/Icons/PhotoShare/index.ts b/src/shared/components/Icons/PhotoShare/index.ts new file mode 100644 index 0000000..67451e6 --- /dev/null +++ b/src/shared/components/Icons/PhotoShare/index.ts @@ -0,0 +1 @@ +export { PhotoShareSvg } from './PhotoShare'; diff --git a/src/shared/components/Icons/Pin/Pin.tsx b/src/shared/components/Icons/Pin/Pin.tsx new file mode 100644 index 0000000..137a13a --- /dev/null +++ b/src/shared/components/Icons/Pin/Pin.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Pin from '../../../Assets/pin.svg'; + +// Custom css +import classes from './pin.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PinSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PinSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PinSvgMemo = memo(PinSvg, areEqualShallow); +export { PinSvgMemo as PinSvg }; diff --git a/src/shared/components/Icons/Pin/index.ts b/src/shared/components/Icons/Pin/index.ts new file mode 100644 index 0000000..b5205f0 --- /dev/null +++ b/src/shared/components/Icons/Pin/index.ts @@ -0,0 +1 @@ +export { PinSvg } from './Pin'; diff --git a/src/shared/components/Icons/Pin/pin.module.css b/src/shared/components/Icons/Pin/pin.module.css new file mode 100644 index 0000000..dc6df91 --- /dev/null +++ b/src/shared/components/Icons/Pin/pin.module.css @@ -0,0 +1,3 @@ +.pinBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/PinActive/PinActive.tsx b/src/shared/components/Icons/PinActive/PinActive.tsx new file mode 100644 index 0000000..b56f5ed --- /dev/null +++ b/src/shared/components/Icons/PinActive/PinActive.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PinActive from '../../../Assets/pinActive.svg'; + +// Custom css +import classes from './pinActive.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PinActiveSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PinActiveSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PinActiveSvgMemo = memo(PinActiveSvg, areEqualShallow); +export { PinActiveSvgMemo as PinActiveSvg }; diff --git a/src/shared/components/Icons/PinActive/index.ts b/src/shared/components/Icons/PinActive/index.ts new file mode 100644 index 0000000..a95a2ed --- /dev/null +++ b/src/shared/components/Icons/PinActive/index.ts @@ -0,0 +1 @@ +export { PinActiveSvg } from './PinActive'; diff --git a/src/shared/components/Icons/PinActive/pinActive.module.css b/src/shared/components/Icons/PinActive/pinActive.module.css new file mode 100644 index 0000000..c737163 --- /dev/null +++ b/src/shared/components/Icons/PinActive/pinActive.module.css @@ -0,0 +1,3 @@ +.pinBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Plus/Plus.tsx b/src/shared/components/Icons/Plus/Plus.tsx new file mode 100644 index 0000000..6fb8ea5 --- /dev/null +++ b/src/shared/components/Icons/Plus/Plus.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Plus from '../../../Assets/plus.svg'; + +// Custom css +import classes from './plus.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PlusSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PlusSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PlusSvgMemo = memo(PlusSvg, areEqualShallow); +export { PlusSvgMemo as PlusSvg }; \ No newline at end of file diff --git a/src/shared/components/Icons/Plus/index.ts b/src/shared/components/Icons/Plus/index.ts new file mode 100644 index 0000000..7b5f245 --- /dev/null +++ b/src/shared/components/Icons/Plus/index.ts @@ -0,0 +1 @@ +export { PlusSvg } from './Plus'; diff --git a/src/shared/components/Icons/Plus/plus.module.css b/src/shared/components/Icons/Plus/plus.module.css new file mode 100644 index 0000000..dd9dfd5 --- /dev/null +++ b/src/shared/components/Icons/Plus/plus.module.css @@ -0,0 +1,3 @@ +.plusBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/PrivateOffice/PrivateOffice.tsx b/src/shared/components/Icons/PrivateOffice/PrivateOffice.tsx new file mode 100644 index 0000000..8430a47 --- /dev/null +++ b/src/shared/components/Icons/PrivateOffice/PrivateOffice.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import PrivateOffice from '../../../Assets/private-office.svg'; + +// Custom css +import classes from './privateOffice.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PrivateOfficeSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PrivateOfficeSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PrivateOfficeSvgMemo = memo(PrivateOfficeSvg, areEqualShallow); +export { PrivateOfficeSvgMemo as PrivateOfficeSvg }; diff --git a/src/shared/components/Icons/PrivateOffice/index.ts b/src/shared/components/Icons/PrivateOffice/index.ts new file mode 100644 index 0000000..bfd0476 --- /dev/null +++ b/src/shared/components/Icons/PrivateOffice/index.ts @@ -0,0 +1 @@ +export { PrivateOfficeSvg } from './PrivateOffice'; diff --git a/src/shared/components/Icons/PrivateOffice/privateOffice.module.css b/src/shared/components/Icons/PrivateOffice/privateOffice.module.css new file mode 100644 index 0000000..57f7aa2 --- /dev/null +++ b/src/shared/components/Icons/PrivateOffice/privateOffice.module.css @@ -0,0 +1,3 @@ +.privateOfficeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Projects/Projects.tsx b/src/shared/components/Icons/Projects/Projects.tsx new file mode 100644 index 0000000..f94b086 --- /dev/null +++ b/src/shared/components/Icons/Projects/Projects.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import Projects from '../../../Assets/projects.svg'; + +// Custom css +import classes from './projects.module.css'; + +interface Props { + className?: string; + fill: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ProjectsSvg = ({ className = '', fill = '#5B476B', id, onClick, onKeyUp }: Props) => ( + +); + +ProjectsSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ProjectsSvgMemo = memo(ProjectsSvg, areEqualShallow); +export { ProjectsSvgMemo as ProjectsSvg }; diff --git a/src/shared/components/Icons/Projects/index.ts b/src/shared/components/Icons/Projects/index.ts new file mode 100644 index 0000000..175c685 --- /dev/null +++ b/src/shared/components/Icons/Projects/index.ts @@ -0,0 +1 @@ +export { ProjectsSvg } from './Projects'; diff --git a/src/shared/components/Icons/Projects/projects.module.css b/src/shared/components/Icons/Projects/projects.module.css new file mode 100644 index 0000000..21205cf --- /dev/null +++ b/src/shared/components/Icons/Projects/projects.module.css @@ -0,0 +1,3 @@ +.projectsBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Radio/Radio.tsx b/src/shared/components/Icons/Radio/Radio.tsx new file mode 100644 index 0000000..6659d26 --- /dev/null +++ b/src/shared/components/Icons/Radio/Radio.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Radio from '../../../Assets/radio.svg'; + +// Custom css +import classes from './radio.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const RadioSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +RadioSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const RadioSvgMemo = memo(RadioSvg, areEqualShallow); +export { RadioSvgMemo as RadioSvg }; diff --git a/src/shared/components/Icons/Radio/index.ts b/src/shared/components/Icons/Radio/index.ts new file mode 100644 index 0000000..19a3418 --- /dev/null +++ b/src/shared/components/Icons/Radio/index.ts @@ -0,0 +1 @@ +export { RadioSvg } from './Radio'; diff --git a/src/shared/components/Icons/Radio/radio.module.css b/src/shared/components/Icons/Radio/radio.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Radio/radio.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Reception/Reception.tsx b/src/shared/components/Icons/Reception/Reception.tsx new file mode 100644 index 0000000..bb7de1c --- /dev/null +++ b/src/shared/components/Icons/Reception/Reception.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Reception from '../../../Assets/reception.svg'; + +// Custom css +import classes from './reception.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ReceptionSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +ReceptionSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ReceptionSvgMemo = memo(ReceptionSvg, areEqualShallow); +export { ReceptionSvgMemo as ReceptionSvg }; diff --git a/src/shared/components/Icons/Reception/index.ts b/src/shared/components/Icons/Reception/index.ts new file mode 100644 index 0000000..16a204d --- /dev/null +++ b/src/shared/components/Icons/Reception/index.ts @@ -0,0 +1 @@ +export { ReceptionSvg } from './Reception'; diff --git a/src/shared/components/Icons/Reception/reception.module.css b/src/shared/components/Icons/Reception/reception.module.css new file mode 100644 index 0000000..8df015c --- /dev/null +++ b/src/shared/components/Icons/Reception/reception.module.css @@ -0,0 +1,3 @@ +.receptionBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ReportsType/ReportsType.tsx b/src/shared/components/Icons/ReportsType/ReportsType.tsx new file mode 100644 index 0000000..7cecbc5 --- /dev/null +++ b/src/shared/components/Icons/ReportsType/ReportsType.tsx @@ -0,0 +1,60 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import ReportsCompact from '../../../Assets/reports-type-compact.svg'; +import ReportsExpanded from '../../../Assets/reports-type-expanded.svg'; +import ReportsLarge from '../../../Assets/reports-type-large.svg'; + +// Custom css +import classes from './reportsType.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const ReportsTypeSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'expanded': + return ( + + ); + case 'large': + return ( + + ); + default: + return ( + + ); + } +}; + +ReportsTypeSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: 'compact', + onClick: undefined, + onKeyUp: undefined, +}; + +const ReportsTypeSvgMemo = memo(ReportsTypeSvg, areEqualShallow); +export { ReportsTypeSvgMemo as ReportsTypeSvg }; diff --git a/src/shared/components/Icons/ReportsType/index.ts b/src/shared/components/Icons/ReportsType/index.ts new file mode 100644 index 0000000..4e7a7c1 --- /dev/null +++ b/src/shared/components/Icons/ReportsType/index.ts @@ -0,0 +1 @@ +export { ReportsTypeSvg } from './ReportsType'; diff --git a/src/shared/components/Icons/ReportsType/reportsType.module.css b/src/shared/components/Icons/ReportsType/reportsType.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/ReportsType/reportsType.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RocketEmblem/RocketEmblem.tsx b/src/shared/components/Icons/RocketEmblem/RocketEmblem.tsx new file mode 100644 index 0000000..a41f88a --- /dev/null +++ b/src/shared/components/Icons/RocketEmblem/RocketEmblem.tsx @@ -0,0 +1,40 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import RocketEmblem from '../../../Assets/logo.svg'; +import RocketEmblemTwo from '../../../Assets/logo.svg'; +import RocketEmblemThree from '../../../Assets/logo.svg'; +import RocketEmblemSmall from '../../../Assets/logo.svg'; + +// Custom css +import classes from './rocketEmblem.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; +} + +const RocketEmblemSvg = ({ className = '', id, svgItem }: Props) => { + switch (svgItem) { + case 2: + return ; + case 3: + return ; + case 4: + return ; + + default: + return ; + } +}; + +RocketEmblemSvg.defaultProps = { + svgItem: 1, + className: undefined, + id: undefined, +}; + +const RocketEmblemSvgMemo = memo(RocketEmblemSvg, areEqualShallow); + +export { RocketEmblemSvgMemo as RocketEmblemSvg }; diff --git a/src/shared/components/Icons/RocketEmblem/index.ts b/src/shared/components/Icons/RocketEmblem/index.ts new file mode 100644 index 0000000..be16fb7 --- /dev/null +++ b/src/shared/components/Icons/RocketEmblem/index.ts @@ -0,0 +1 @@ +export { RocketEmblemSvg } from './RocketEmblem'; diff --git a/src/shared/components/Icons/RocketEmblem/rocketEmblem.module.css b/src/shared/components/Icons/RocketEmblem/rocketEmblem.module.css new file mode 100644 index 0000000..e8feea6 --- /dev/null +++ b/src/shared/components/Icons/RocketEmblem/rocketEmblem.module.css @@ -0,0 +1,3 @@ +.rocketEmblemBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomIcon/RoomIcon.tsx b/src/shared/components/Icons/RoomIcon/RoomIcon.tsx new file mode 100644 index 0000000..9d80dd8 --- /dev/null +++ b/src/shared/components/Icons/RoomIcon/RoomIcon.tsx @@ -0,0 +1,130 @@ +import React, { memo, useEffect, useState } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { BathRoomSvg } from '../BathRoom'; +import { BedRoomSvg } from '../BedRoom'; +import { CustomRoomSvg } from '../CustomRoom'; +import { DenSvg } from '../Den'; +import { DiningRoomSvg } from '../DiningRoom'; +import { ElectricalRoomSvg } from '../ElectricalRoom'; +import { ElevatorSvg } from '../Elevator'; +import { EnsuiteSvg } from '../Ensuite'; +import { GymSvg } from '../Gym'; +import { HallwaySvg } from '../Hallway'; +import { KitchenSvg } from '../Kitchen'; +import { LaundrySvg } from '../Laundry'; +import { LivingRoomSvg } from '../LivingRoom'; +import { LobbySvg } from '../Lobby'; +import { LunchRoomSvg } from '../LunchRoom'; +import { MaintenanceRoomSvg } from '../MaintenanceRoom'; +import { MeetingRoomSvg } from '../MeetingRoom'; +import { OfficeSvg } from '../Office'; +import { PrivateOfficeSvg } from '../PrivateOffice'; +import { ReceptionSvg } from '../Reception'; +import { StairwaySvg } from '../Stairway'; +import { StorageSvg } from '../Storage'; +import { + BasementSvg, + CompassSvg, + DeckSvg, + GarageSvg, + PatioSvg, + PlazaSvg, + PoolSvg, + RoofSvg, + ShopSvg, + UtilityRoomSvg, +} from '../RoomTypes'; + +interface Props { + type: string; + className?: string; + events?: any; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const getIcon = (type, className, onClick, onKeyUp) => { + const icons = { + balcony: , // potential image change + barbequearea: , + basement: , + bathroom: , + bay: , + bedroom: , + courtyard: , + customroom: , + deck: , // potential image change + den: , // potential image change + diningroom: , + eastfacing: , + electricalroom: , + elevator: , + ensuite: , // potential image change + entryway: , + garage: , + gym: , + hallway: , + kitchen: , + laundry: , + leisureroom: , + livingroom: , + lobby: , + lunchroom: , + machineroom: , + mailroom: , + maintenanceroom: , + masterbedroom: , + meetingroom: , + multipurposeroom: , + northfacing: , + office: , + parkinggarage: , + patio: , + plaza: , + pool: , + privateoffice: , + reception: , + roof: , + rooftop: , + shed: , + shop: , + southfacing: , + stairway: , + storage: , + storefront: , + terrace: , + utilityroom: , + walkway: , + westfacing: , + }; + + // return null to avoid errors in case if the icon type is not present in the icons list + return icons[type] || ; +}; + +const RoomIcon = ({ className, onClick, onKeyUp, type }: Props) => { + const [icon, setIcon] = useState(null); + + useEffect(() => { + if (type) { + // Remove all white space from the string, with the regex + const iconType = type.toLocaleLowerCase().replace(/\s+/g, ''); + + // set the icon based on icon type change, useful for conditional icon renderings + setIcon(getIcon(iconType, className, onClick, onKeyUp)); + } + }, [type]); + + return icon; +}; + +RoomIcon.defaultProps = { + className: undefined, + events: undefined, +}; + +const RoomIconMemo = memo(RoomIcon, areEqual); + +export { RoomIconMemo as RoomIcon }; diff --git a/src/shared/components/Icons/RoomIcon/index.ts b/src/shared/components/Icons/RoomIcon/index.ts new file mode 100644 index 0000000..932561e --- /dev/null +++ b/src/shared/components/Icons/RoomIcon/index.ts @@ -0,0 +1 @@ +export { RoomIcon } from './RoomIcon'; diff --git a/src/shared/components/Icons/RoomTypes/Basement/Basement.tsx b/src/shared/components/Icons/RoomTypes/Basement/Basement.tsx new file mode 100644 index 0000000..709eb6a --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Basement/Basement.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Basement from '../../../../Assets/basement.svg'; + +// Custom css +import classes from './basement.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const BasementSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +BasementSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const BasementSvgMemo = memo(BasementSvg, areEqualShallow); +export { BasementSvgMemo as BasementSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Basement/basement.module.css b/src/shared/components/Icons/RoomTypes/Basement/basement.module.css new file mode 100644 index 0000000..0ec2b55 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Basement/basement.module.css @@ -0,0 +1,3 @@ +.basementBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Basement/index.ts b/src/shared/components/Icons/RoomTypes/Basement/index.ts new file mode 100644 index 0000000..447428d --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Basement/index.ts @@ -0,0 +1 @@ +export { BasementSvg } from './Basement'; diff --git a/src/shared/components/Icons/RoomTypes/Compass/Compass.tsx b/src/shared/components/Icons/RoomTypes/Compass/Compass.tsx new file mode 100644 index 0000000..d4cfcc7 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Compass/Compass.tsx @@ -0,0 +1,71 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import NorthFacing from '../../../../Assets/northfacing.svg'; +import SouthFacing from '../../../../Assets/southfacing.svg'; +import EastFacing from '../../../../Assets/eastfacing.svg'; +import WestFacing from '../../../../Assets/westfacing.svg'; + +import classes from './compass.module.css'; + +interface Props { + id?: string; + className?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const CompassSvg = ({ id, className, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 2: + return ( + + ); + case 3: + return ( + + ); + case 4: + return ( + + ); + default: + return ( + + ); + } +}; + +CompassSvg.defaultProps = { + id: undefined, + className: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const CompassSvgMemo = memo(CompassSvg, areEqual); + +export { CompassSvgMemo as CompassSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Compass/compass.module.css b/src/shared/components/Icons/RoomTypes/Compass/compass.module.css new file mode 100644 index 0000000..871021d --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Compass/compass.module.css @@ -0,0 +1,3 @@ +.compassBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Compass/index.ts b/src/shared/components/Icons/RoomTypes/Compass/index.ts new file mode 100644 index 0000000..78fa5d3 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Compass/index.ts @@ -0,0 +1 @@ +export { CompassSvg } from './Compass'; diff --git a/src/shared/components/Icons/RoomTypes/Deck/Deck.tsx b/src/shared/components/Icons/RoomTypes/Deck/Deck.tsx new file mode 100644 index 0000000..4db464a --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Deck/Deck.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Deck from '../../../../Assets/deck.svg'; + +// Custom css +import classes from './deck.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const DeckSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +DeckSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const DeckSvgMemo = memo(DeckSvg, areEqualShallow); +export { DeckSvgMemo as DeckSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Deck/deck.module.css b/src/shared/components/Icons/RoomTypes/Deck/deck.module.css new file mode 100644 index 0000000..ab8a47d --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Deck/deck.module.css @@ -0,0 +1,3 @@ +.deckBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Deck/index.ts b/src/shared/components/Icons/RoomTypes/Deck/index.ts new file mode 100644 index 0000000..25c610b --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Deck/index.ts @@ -0,0 +1 @@ +export { DeckSvg } from './Deck'; diff --git a/src/shared/components/Icons/RoomTypes/Garage/Garage.tsx b/src/shared/components/Icons/RoomTypes/Garage/Garage.tsx new file mode 100644 index 0000000..658129c --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Garage/Garage.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Garage from '../../../../Assets/garage.svg'; + +// Custom css +import classes from './garage.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const GarageSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +GarageSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const GarageSvgMemo = memo(GarageSvg, areEqualShallow); +export { GarageSvgMemo as GarageSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Garage/garage.module.css b/src/shared/components/Icons/RoomTypes/Garage/garage.module.css new file mode 100644 index 0000000..913dbf4 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Garage/garage.module.css @@ -0,0 +1,3 @@ +.garageBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Garage/index.ts b/src/shared/components/Icons/RoomTypes/Garage/index.ts new file mode 100644 index 0000000..f30b2e8 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Garage/index.ts @@ -0,0 +1 @@ +export { GarageSvg } from './Garage'; diff --git a/src/shared/components/Icons/RoomTypes/Patio/Patio.tsx b/src/shared/components/Icons/RoomTypes/Patio/Patio.tsx new file mode 100644 index 0000000..74e6146 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Patio/Patio.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Patio from '../../../../Assets/patio.svg'; + +// Custom css +import classes from './patio.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PatioSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PatioSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PatioSvgMemo = memo(PatioSvg, areEqualShallow); +export { PatioSvgMemo as PatioSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Patio/index.ts b/src/shared/components/Icons/RoomTypes/Patio/index.ts new file mode 100644 index 0000000..8536a49 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Patio/index.ts @@ -0,0 +1 @@ +export { PatioSvg } from './Patio'; diff --git a/src/shared/components/Icons/RoomTypes/Patio/patio.module.css b/src/shared/components/Icons/RoomTypes/Patio/patio.module.css new file mode 100644 index 0000000..53076cf --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Patio/patio.module.css @@ -0,0 +1,3 @@ +.patioBase { + cursor: pointer; + } \ No newline at end of file diff --git a/src/shared/components/Icons/RoomTypes/Plaza/Plaza.tsx b/src/shared/components/Icons/RoomTypes/Plaza/Plaza.tsx new file mode 100644 index 0000000..2a188d3 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Plaza/Plaza.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Plaza from '../../../../Assets/plaza.svg'; + +// Custom css +import classes from './plaza.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PlazaSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PlazaSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PlazaSvgMemo = memo(PlazaSvg, areEqualShallow); +export { PlazaSvgMemo as PlazaSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Plaza/index.ts b/src/shared/components/Icons/RoomTypes/Plaza/index.ts new file mode 100644 index 0000000..de78040 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Plaza/index.ts @@ -0,0 +1 @@ +export { PlazaSvg } from './Plaza'; diff --git a/src/shared/components/Icons/RoomTypes/Plaza/plaza.module.css b/src/shared/components/Icons/RoomTypes/Plaza/plaza.module.css new file mode 100644 index 0000000..9c14e74 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Plaza/plaza.module.css @@ -0,0 +1,3 @@ +.plazaBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Pool/Pool.tsx b/src/shared/components/Icons/RoomTypes/Pool/Pool.tsx new file mode 100644 index 0000000..09fd113 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Pool/Pool.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Pool from '../../../../Assets/pool.svg'; + +// Custom css +import classes from './pool.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const PoolSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +PoolSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const PoolSvgMemo = memo(PoolSvg, areEqualShallow); +export { PoolSvgMemo as PoolSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Pool/index.ts b/src/shared/components/Icons/RoomTypes/Pool/index.ts new file mode 100644 index 0000000..87b7379 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Pool/index.ts @@ -0,0 +1 @@ +export { PoolSvg } from './Pool'; diff --git a/src/shared/components/Icons/RoomTypes/Pool/pool.module.css b/src/shared/components/Icons/RoomTypes/Pool/pool.module.css new file mode 100644 index 0000000..39a5901 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Pool/pool.module.css @@ -0,0 +1,3 @@ +.poolBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Roof/Roof.tsx b/src/shared/components/Icons/RoomTypes/Roof/Roof.tsx new file mode 100644 index 0000000..ad594b9 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Roof/Roof.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Roof from '../../../../Assets/roof.svg'; + +// Custom css +import classes from './roof.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const RoofSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +RoofSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const RoofSvgMemo = memo(RoofSvg, areEqualShallow); +export { RoofSvgMemo as RoofSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Roof/index.ts b/src/shared/components/Icons/RoomTypes/Roof/index.ts new file mode 100644 index 0000000..7e0fc48 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Roof/index.ts @@ -0,0 +1 @@ +export { RoofSvg } from './Roof'; diff --git a/src/shared/components/Icons/RoomTypes/Roof/roof.module.css b/src/shared/components/Icons/RoomTypes/Roof/roof.module.css new file mode 100644 index 0000000..9886c6c --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Roof/roof.module.css @@ -0,0 +1,3 @@ +.roofBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/Shop/Shop.tsx b/src/shared/components/Icons/RoomTypes/Shop/Shop.tsx new file mode 100644 index 0000000..6103d8f --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Shop/Shop.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Shop from '../../../../Assets/shop.svg'; + +// Custom css +import classes from './shop.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ShopSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +ShopSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ShopSvgMemo = memo(ShopSvg, areEqualShallow); +export { ShopSvgMemo as ShopSvg }; diff --git a/src/shared/components/Icons/RoomTypes/Shop/index.ts b/src/shared/components/Icons/RoomTypes/Shop/index.ts new file mode 100644 index 0000000..4eb27e9 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Shop/index.ts @@ -0,0 +1 @@ +export { ShopSvg } from './Shop'; diff --git a/src/shared/components/Icons/RoomTypes/Shop/shop.module.css b/src/shared/components/Icons/RoomTypes/Shop/shop.module.css new file mode 100644 index 0000000..8243f74 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/Shop/shop.module.css @@ -0,0 +1,3 @@ +.shopBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/UtilityRoom/UtilityRoom.tsx b/src/shared/components/Icons/RoomTypes/UtilityRoom/UtilityRoom.tsx new file mode 100644 index 0000000..0fa5a21 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/UtilityRoom/UtilityRoom.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import UtilityRoom from '../../../../Assets/utilityroom.svg'; + +// Custom css +import classes from './utilityroom.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const UtilityRoomSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +UtilityRoomSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const UtilityRoomSvgMemo = memo(UtilityRoomSvg, areEqualShallow); +export { UtilityRoomSvgMemo as UtilityRoomSvg }; diff --git a/src/shared/components/Icons/RoomTypes/UtilityRoom/index.ts b/src/shared/components/Icons/RoomTypes/UtilityRoom/index.ts new file mode 100644 index 0000000..4f40f1b --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/UtilityRoom/index.ts @@ -0,0 +1 @@ +export { UtilityRoomSvg } from './UtilityRoom'; diff --git a/src/shared/components/Icons/RoomTypes/UtilityRoom/utilityroom.module.css b/src/shared/components/Icons/RoomTypes/UtilityRoom/utilityroom.module.css new file mode 100644 index 0000000..41d2fce --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/UtilityRoom/utilityroom.module.css @@ -0,0 +1,3 @@ +.utilityroomBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/RoomTypes/index.ts b/src/shared/components/Icons/RoomTypes/index.ts new file mode 100644 index 0000000..7a1a141 --- /dev/null +++ b/src/shared/components/Icons/RoomTypes/index.ts @@ -0,0 +1,10 @@ +export { BasementSvg } from './Basement'; +export { CompassSvg } from './Compass'; +export { DeckSvg } from './Deck'; +export { GarageSvg } from './Garage'; +export { PatioSvg } from './Patio'; +export { PlazaSvg } from './Plaza'; +export { PoolSvg } from './Pool'; +export { RoofSvg } from './Roof'; +export { ShopSvg } from './Shop'; +export { UtilityRoomSvg } from './UtilityRoom'; diff --git a/src/shared/components/Icons/Search/Search.tsx b/src/shared/components/Icons/Search/Search.tsx new file mode 100644 index 0000000..02b9744 --- /dev/null +++ b/src/shared/components/Icons/Search/Search.tsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Search from '../../../Assets/search.svg'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const SearchSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SearchSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SearchSvgMemo = memo(SearchSvg, areEqualShallow); +export { SearchSvgMemo as SearchSvg }; diff --git a/src/shared/components/Icons/Search/index.ts b/src/shared/components/Icons/Search/index.ts new file mode 100644 index 0000000..6ca70a7 --- /dev/null +++ b/src/shared/components/Icons/Search/index.ts @@ -0,0 +1 @@ +export { SearchSvg } from './Search'; diff --git a/src/shared/components/Icons/Share/Share.tsx b/src/shared/components/Icons/Share/Share.tsx new file mode 100644 index 0000000..b53e340 --- /dev/null +++ b/src/shared/components/Icons/Share/Share.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Share32 from '../../../Assets/share-32.svg'; +import Share from '../../../Assets/share.svg'; + +import classes from './share.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const ShareSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case '32': + return ( + + ); + default: + return ( + + ); + } +}; +ShareSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ShareSvgMemo = memo(ShareSvg, areEqualShallow); +export { ShareSvgMemo as ShareSvg }; diff --git a/src/shared/components/Icons/Share/index.ts b/src/shared/components/Icons/Share/index.ts new file mode 100644 index 0000000..fa88461 --- /dev/null +++ b/src/shared/components/Icons/Share/index.ts @@ -0,0 +1 @@ +export { ShareSvg } from './Share'; diff --git a/src/shared/components/Icons/Share/share.module.css b/src/shared/components/Icons/Share/share.module.css new file mode 100644 index 0000000..8d664f8 --- /dev/null +++ b/src/shared/components/Icons/Share/share.module.css @@ -0,0 +1,3 @@ +.shareBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/SideBarClose/SideBarClose.tsx b/src/shared/components/Icons/SideBarClose/SideBarClose.tsx new file mode 100644 index 0000000..1146d04 --- /dev/null +++ b/src/shared/components/Icons/SideBarClose/SideBarClose.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import SideBarClose from '../../../Assets/side-bar-close.svg'; + +// Custom css +import classes from './sideBarClose.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SideBarCloseSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SideBarCloseSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SideBarCloseSvgMemo = memo(SideBarCloseSvg, areEqualShallow); +export { SideBarCloseSvgMemo as SideBarCloseSvg }; diff --git a/src/shared/components/Icons/SideBarClose/index.ts b/src/shared/components/Icons/SideBarClose/index.ts new file mode 100644 index 0000000..6249dd8 --- /dev/null +++ b/src/shared/components/Icons/SideBarClose/index.ts @@ -0,0 +1 @@ +export { SideBarCloseSvg } from './SideBarClose'; diff --git a/src/shared/components/Icons/SideBarClose/sideBarClose.module.css b/src/shared/components/Icons/SideBarClose/sideBarClose.module.css new file mode 100644 index 0000000..2053825 --- /dev/null +++ b/src/shared/components/Icons/SideBarClose/sideBarClose.module.css @@ -0,0 +1,3 @@ +.closeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/SideBarLeftArrow/SideBarLeftArrow.tsx b/src/shared/components/Icons/SideBarLeftArrow/SideBarLeftArrow.tsx new file mode 100644 index 0000000..e025b48 --- /dev/null +++ b/src/shared/components/Icons/SideBarLeftArrow/SideBarLeftArrow.tsx @@ -0,0 +1,32 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import SideBarLeftArrow from '../../../Assets/side-bar-left-arrow.svg'; + +// Custom css +import classes from './sideBarLeftArrow.module.css'; + +interface Props { + className?: string; + id?: string; + onClick: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const SideBarLeftArrowSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SideBarLeftArrowSvg.defaultProps = { + className: undefined, + id: undefined, + onKeyUp: undefined, +}; + +const SideBarLeftArrowSvgMemo = memo(SideBarLeftArrowSvg, areEqualShallow); +export { SideBarLeftArrowSvgMemo as SideBarLeftArrowSvg }; diff --git a/src/shared/components/Icons/SideBarLeftArrow/index.ts b/src/shared/components/Icons/SideBarLeftArrow/index.ts new file mode 100644 index 0000000..24ec851 --- /dev/null +++ b/src/shared/components/Icons/SideBarLeftArrow/index.ts @@ -0,0 +1 @@ +export { SideBarLeftArrowSvg } from './SideBarLeftArrow'; diff --git a/src/shared/components/Icons/SideBarLeftArrow/sideBarLeftArrow.module.css b/src/shared/components/Icons/SideBarLeftArrow/sideBarLeftArrow.module.css new file mode 100644 index 0000000..b992cba --- /dev/null +++ b/src/shared/components/Icons/SideBarLeftArrow/sideBarLeftArrow.module.css @@ -0,0 +1,3 @@ +.sideBarArrowBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/SideBarRightArrow/SideBarRightArrow.tsx b/src/shared/components/Icons/SideBarRightArrow/SideBarRightArrow.tsx new file mode 100644 index 0000000..ce75b1d --- /dev/null +++ b/src/shared/components/Icons/SideBarRightArrow/SideBarRightArrow.tsx @@ -0,0 +1,33 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import SideBarRightArrow from '../../../Assets/side-bar-right-arrow.svg'; + +// Custom css +import classes from './sideBarRightArrow.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const SideBarRightArrowSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SideBarRightArrowSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SideBarRightArrowSvgMemo = memo(SideBarRightArrowSvg, areEqualShallow); +export { SideBarRightArrowSvgMemo as SideBarRightArrowSvg }; diff --git a/src/shared/components/Icons/SideBarRightArrow/index.ts b/src/shared/components/Icons/SideBarRightArrow/index.ts new file mode 100644 index 0000000..8bad698 --- /dev/null +++ b/src/shared/components/Icons/SideBarRightArrow/index.ts @@ -0,0 +1 @@ +export { SideBarRightArrowSvg } from './SideBarRightArrow'; diff --git a/src/shared/components/Icons/SideBarRightArrow/sideBarRightArrow.module.css b/src/shared/components/Icons/SideBarRightArrow/sideBarRightArrow.module.css new file mode 100644 index 0000000..b992cba --- /dev/null +++ b/src/shared/components/Icons/SideBarRightArrow/sideBarRightArrow.module.css @@ -0,0 +1,3 @@ +.sideBarArrowBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/SingleHome/SingleHome.tsx b/src/shared/components/Icons/SingleHome/SingleHome.tsx new file mode 100644 index 0000000..808daf5 --- /dev/null +++ b/src/shared/components/Icons/SingleHome/SingleHome.tsx @@ -0,0 +1,49 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import SingleHome from '../../../Assets/single-home.svg'; +import SingleHomeSmall from '../../../Assets/single-home-sm.svg'; + +// Custom css +import classes from './singleHome.module.css'; + +interface Props { + className?: string; + id?: string; + iconType?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SingleHomeSvg = ({ className = '', id, iconType, onClick, onKeyUp }: Props) => { + switch (iconType) { + case 'small': + return ( + + ); + default: + return ( + + ); + } +}; + +SingleHomeSvg.defaultProps = { + className: undefined, + id: undefined, + iconType: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SingleHomeSvgMemo = memo(SingleHomeSvg, areEqualShallow); +export { SingleHomeSvgMemo as SingleHomeSvg }; diff --git a/src/shared/components/Icons/SingleHome/index.ts b/src/shared/components/Icons/SingleHome/index.ts new file mode 100644 index 0000000..c4659df --- /dev/null +++ b/src/shared/components/Icons/SingleHome/index.ts @@ -0,0 +1 @@ +export { SingleHomeSvg } from './SingleHome'; diff --git a/src/shared/components/Icons/SingleHome/singleHome.module.css b/src/shared/components/Icons/SingleHome/singleHome.module.css new file mode 100644 index 0000000..f0ae2ce --- /dev/null +++ b/src/shared/components/Icons/SingleHome/singleHome.module.css @@ -0,0 +1,3 @@ +.singleHomeBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Sms/Sms.tsx b/src/shared/components/Icons/Sms/Sms.tsx new file mode 100644 index 0000000..8e72547 --- /dev/null +++ b/src/shared/components/Icons/Sms/Sms.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Sms from '../../../Assets/sms-icon.svg'; + +// Custom css +import classes from './sms.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SmsSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SmsSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SmsSvgMemo = memo(SmsSvg, areEqualShallow); +export { SmsSvgMemo as SmsSvg }; diff --git a/src/shared/components/Icons/Sms/index.ts b/src/shared/components/Icons/Sms/index.ts new file mode 100644 index 0000000..c0b5523 --- /dev/null +++ b/src/shared/components/Icons/Sms/index.ts @@ -0,0 +1 @@ +export { SmsSvg } from './Sms'; diff --git a/src/shared/components/Icons/Sms/sms.module.css b/src/shared/components/Icons/Sms/sms.module.css new file mode 100644 index 0000000..0b5fce8 --- /dev/null +++ b/src/shared/components/Icons/Sms/sms.module.css @@ -0,0 +1,3 @@ +.smsBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Square/Square.tsx b/src/shared/components/Icons/Square/Square.tsx new file mode 100644 index 0000000..8d5b7a0 --- /dev/null +++ b/src/shared/components/Icons/Square/Square.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Square from '../../../Assets/square.svg'; + +// Custom css +import classes from './square.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SquareSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SquareSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SquareSvgMemo = memo(SquareSvg, areEqualShallow); +export { SquareSvgMemo as SquareSvg }; diff --git a/src/shared/components/Icons/Square/index.ts b/src/shared/components/Icons/Square/index.ts new file mode 100644 index 0000000..b230a1f --- /dev/null +++ b/src/shared/components/Icons/Square/index.ts @@ -0,0 +1 @@ +export { SquareSvg } from './Square'; diff --git a/src/shared/components/Icons/Square/square.module.css b/src/shared/components/Icons/Square/square.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Square/square.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Stairway/Stairway.tsx b/src/shared/components/Icons/Stairway/Stairway.tsx new file mode 100644 index 0000000..97a8c16 --- /dev/null +++ b/src/shared/components/Icons/Stairway/Stairway.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Stairway from "../../../Assets/stairway.svg"; + +// Custom css +import classes from "./stairway.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const StairwaySvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +StairwaySvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const StairwaySvgMemo = memo(StairwaySvg, areEqualShallow); +export { StairwaySvgMemo as StairwaySvg }; diff --git a/src/shared/components/Icons/Stairway/index.ts b/src/shared/components/Icons/Stairway/index.ts new file mode 100644 index 0000000..c78b5eb --- /dev/null +++ b/src/shared/components/Icons/Stairway/index.ts @@ -0,0 +1 @@ +export { StairwaySvg } from "./Stairway"; diff --git a/src/shared/components/Icons/Stairway/stairway.module.css b/src/shared/components/Icons/Stairway/stairway.module.css new file mode 100644 index 0000000..def19b4 --- /dev/null +++ b/src/shared/components/Icons/Stairway/stairway.module.css @@ -0,0 +1,3 @@ +.stairwayBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Storage/Storage.tsx b/src/shared/components/Icons/Storage/Storage.tsx new file mode 100644 index 0000000..78dcd0b --- /dev/null +++ b/src/shared/components/Icons/Storage/Storage.tsx @@ -0,0 +1,27 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import Storage from "../../../Assets/storage.svg"; + +// Custom css +import classes from "./storage.module.css"; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const StorageSvg = ({ className = "", id, onClick, onKeyUp }: Props) => ( + +); + +StorageSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const StorageSvgMemo = memo(StorageSvg, areEqualShallow); +export { StorageSvgMemo as StorageSvg }; diff --git a/src/shared/components/Icons/Storage/index.ts b/src/shared/components/Icons/Storage/index.ts new file mode 100644 index 0000000..206259e --- /dev/null +++ b/src/shared/components/Icons/Storage/index.ts @@ -0,0 +1 @@ +export { StorageSvg } from "./Storage"; diff --git a/src/shared/components/Icons/Storage/storage.module.css b/src/shared/components/Icons/Storage/storage.module.css new file mode 100644 index 0000000..4b251f6 --- /dev/null +++ b/src/shared/components/Icons/Storage/storage.module.css @@ -0,0 +1,3 @@ +.storageBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/Support/Support.tsx b/src/shared/components/Icons/Support/Support.tsx new file mode 100644 index 0000000..c7490de --- /dev/null +++ b/src/shared/components/Icons/Support/Support.tsx @@ -0,0 +1,28 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Support from '../../../Assets/support.svg'; + +// Custom css +import classes from './support.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const SupportSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +SupportSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const SupportSvgMemo = memo(SupportSvg, areEqualShallow); + +export { SupportSvgMemo as SupportSvg }; diff --git a/src/shared/components/Icons/Support/index.ts b/src/shared/components/Icons/Support/index.ts new file mode 100644 index 0000000..8d9674f --- /dev/null +++ b/src/shared/components/Icons/Support/index.ts @@ -0,0 +1 @@ +export { SupportSvg } from './Support'; diff --git a/src/shared/components/Icons/Support/support.module.css b/src/shared/components/Icons/Support/support.module.css new file mode 100644 index 0000000..196ab2a --- /dev/null +++ b/src/shared/components/Icons/Support/support.module.css @@ -0,0 +1,3 @@ +.iconBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/ThreeDots/ThreeDots.tsx b/src/shared/components/Icons/ThreeDots/ThreeDots.tsx new file mode 100644 index 0000000..8e9dbc6 --- /dev/null +++ b/src/shared/components/Icons/ThreeDots/ThreeDots.tsx @@ -0,0 +1,27 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import ThreeDots from '../../../Assets/three-dots.svg'; + +// Custom css +import classes from './threeDots.module.css'; + +interface Props { + className?: string; + id?: string; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const ThreeDotsSvg = ({ className = '', id, onClick, onKeyUp }: Props) => ( + +); + +ThreeDotsSvg.defaultProps = { + className: undefined, + id: undefined, + onClick: undefined, + onKeyUp: undefined, +}; + +const ThreeDotsSvgMemo = memo(ThreeDotsSvg, areEqualShallow); +export { ThreeDotsSvgMemo as ThreeDotsSvg }; diff --git a/src/shared/components/Icons/ThreeDots/index.ts b/src/shared/components/Icons/ThreeDots/index.ts new file mode 100644 index 0000000..0589397 --- /dev/null +++ b/src/shared/components/Icons/ThreeDots/index.ts @@ -0,0 +1 @@ +export { ThreeDotsSvg } from './ThreeDots'; diff --git a/src/shared/components/Icons/ThreeDots/threeDots.module.css b/src/shared/components/Icons/ThreeDots/threeDots.module.css new file mode 100644 index 0000000..959af85 --- /dev/null +++ b/src/shared/components/Icons/ThreeDots/threeDots.module.css @@ -0,0 +1,3 @@ +.threeDotsBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Trash/Trash.tsx b/src/shared/components/Icons/Trash/Trash.tsx new file mode 100644 index 0000000..bcd1d63 --- /dev/null +++ b/src/shared/components/Icons/Trash/Trash.tsx @@ -0,0 +1,69 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Trash from '../../../Assets/trash.svg'; +import TrashSm from '../../../Assets/trash-sm.svg'; +import TrashMd from '../../../Assets/trash-md.svg'; +import TrashSmDisabled from '../../../Assets/trash-sm-disabled.svg'; +import TrashSmDark from '../../../Assets/trash-sm-dark.svg'; +import TrashPhoto from '../../../Assets/trash-photo.svg'; + +// Custom css +import classes from './trash.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} +const TrashSvg = ({ className = '', id, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 2: + return ( + + ); + case 3: + return ( + + ); + case 4: + return ( + + ); + case 5: + return ( + + ); + case 6: + return ( + + ); + default: + return ( + + ); + } +}; + +TrashSvg.defaultProps = { + className: undefined, + id: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const TrashSvgMemo = memo(TrashSvg, areEqualShallow); +export { TrashSvgMemo as TrashSvg }; diff --git a/src/shared/components/Icons/Trash/index.ts b/src/shared/components/Icons/Trash/index.ts new file mode 100644 index 0000000..c59ce33 --- /dev/null +++ b/src/shared/components/Icons/Trash/index.ts @@ -0,0 +1 @@ +export { TrashSvg } from "./Trash"; diff --git a/src/shared/components/Icons/Trash/trash.module.css b/src/shared/components/Icons/Trash/trash.module.css new file mode 100644 index 0000000..9905270 --- /dev/null +++ b/src/shared/components/Icons/Trash/trash.module.css @@ -0,0 +1,3 @@ +.trashBase { + cursor: pointer; +} diff --git a/src/shared/components/Icons/Unit/Unit.tsx b/src/shared/components/Icons/Unit/Unit.tsx new file mode 100644 index 0000000..b138bee --- /dev/null +++ b/src/shared/components/Icons/Unit/Unit.tsx @@ -0,0 +1,48 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; +import Unit from '../../../Assets/unit.svg'; +import UnitSm from '../../../Assets/unit-sm.svg'; +import UnitLg from '../../../Assets/unit-lg.svg'; +import UnitAdd from '../../../Assets/unit-add.svg'; + +// Custom css +import classes from './unit.module.css'; + +interface Props { + className?: string; + id?: string; + svgItem?: number; + onClick?: (e: any) => void; + onKeyUp?: (e: any) => void; +} + +const UnitSvg = ({ className = '', id, svgItem, onClick, onKeyUp }: Props) => { + switch (svgItem) { + case 2: + return ( + + ); + case 3: + return ( + + ); + case 4: + return ( + + ); + default: + return ; + } +}; + +UnitSvg.defaultProps = { + className: undefined, + id: undefined, + svgItem: 1, + onClick: undefined, + onKeyUp: undefined, +}; + +const UnitSvgMemo = memo(UnitSvg, areEqualShallow); +export { UnitSvgMemo as UnitSvg }; diff --git a/src/shared/components/Icons/Unit/index.ts b/src/shared/components/Icons/Unit/index.ts new file mode 100644 index 0000000..1521693 --- /dev/null +++ b/src/shared/components/Icons/Unit/index.ts @@ -0,0 +1 @@ +export { UnitSvg } from "./Unit"; diff --git a/src/shared/components/Icons/Unit/unit.module.css b/src/shared/components/Icons/Unit/unit.module.css new file mode 100644 index 0000000..5474670 --- /dev/null +++ b/src/shared/components/Icons/Unit/unit.module.css @@ -0,0 +1,3 @@ +.floorBase { + cursor: pointer; +} \ No newline at end of file diff --git a/src/shared/components/Icons/WelcomeAboard/WelcomeAboard.tsx b/src/shared/components/Icons/WelcomeAboard/WelcomeAboard.tsx new file mode 100644 index 0000000..900ad4c --- /dev/null +++ b/src/shared/components/Icons/WelcomeAboard/WelcomeAboard.tsx @@ -0,0 +1,18 @@ +import React, { memo } from "react"; + +import { areEqualShallow } from "Utils/equalityChecks"; +import WelcomeAboard from "../../../Assets/welcome-aboard.svg"; + +interface Props { + className?: string; + id?: string; +} +const WelcomeAboardSvg = ({ className = "", id }: Props) => ; + +WelcomeAboardSvg.defaultProps = { + className: undefined, + id: undefined, +}; + +const WelcomeAboardSvgMemo = memo(WelcomeAboardSvg, areEqualShallow); +export { WelcomeAboardSvgMemo as WelcomeAboardSvg }; diff --git a/src/shared/components/Icons/WelcomeAboard/index.ts b/src/shared/components/Icons/WelcomeAboard/index.ts new file mode 100644 index 0000000..29bc18d --- /dev/null +++ b/src/shared/components/Icons/WelcomeAboard/index.ts @@ -0,0 +1 @@ +export { WelcomeAboardSvg } from "./WelcomeAboard"; diff --git a/src/shared/components/Icons/index.ts b/src/shared/components/Icons/index.ts new file mode 100644 index 0000000..55d5c92 --- /dev/null +++ b/src/shared/components/Icons/index.ts @@ -0,0 +1,3 @@ +export { DamageIcon } from './DamageIcon'; +export { Icon } from './Icon'; +export { RoomIcon } from './RoomIcon'; diff --git a/src/shared/components/ImageDeleteModal/ImageDeleteModal.tsx b/src/shared/components/ImageDeleteModal/ImageDeleteModal.tsx new file mode 100644 index 0000000..5845b85 --- /dev/null +++ b/src/shared/components/ImageDeleteModal/ImageDeleteModal.tsx @@ -0,0 +1,44 @@ +import React, { memo } from 'react'; + +import { Modal } from 'Components/Modal'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Button } from 'Components/Button'; +import classes from './imageDeleteModal.module.css'; + +interface Props { + id: number; + isOpen: boolean; + modalCloseClick: (e: any) => void; + onDeleteButtonClick: (e: any) => void; +} +const ImageDeleteModal = ({ id, isOpen, modalCloseClick, onDeleteButtonClick }: Props) => ( +
    + +
    +

    Are you sure you want to delete this photo?

    +

    You cannot undo this action

    +
    + + +     +
    +); + +const ImageDeleteModalMemo = memo(ImageDeleteModal, areEqual); + +export { ImageDeleteModalMemo as ImageDeleteModal }; diff --git a/src/shared/components/ImageDeleteModal/imageDeleteModal.module.css b/src/shared/components/ImageDeleteModal/imageDeleteModal.module.css new file mode 100644 index 0000000..9c0aa0e --- /dev/null +++ b/src/shared/components/ImageDeleteModal/imageDeleteModal.module.css @@ -0,0 +1,79 @@ +.modalContent { + max-width: 415px; + height: 377px; + padding: 1.3em 1.5em; + box-shadow: 0px 24px 44px rgba(119, 113, 133, 0.2); + border-radius: 5px; +} +.modalHeader { + padding: 0 0 0.5em 0; + border-color: #e8e7ed; +} +.modalHeader svg path { + fill: #5b476b; +} +.modalHeader > svg path { + fill: #e82828; +} +.modalTitle { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + color: #e82828; +} +.modalBody { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1rem 0 0 0; +} +.modalBody .deleteModalCopy { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + color: #777185; +} +.modalBody .deleteModalCopy p { + margin-bottom: 0.1rem; +} +.delete { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #e82828; + border-color: #e82828; +} +.delete:hover, +.delete:focus { + color: #ffffff; + background-color: #e82828; +} +.modalFooter { + padding: 1rem 0 0 0; + border: none; + justify-content: center; +} +.closeButtonClass { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #5b476b; + border: 1px solid #5b476b; + border-radius: 5px; + width: 100%; + margin-left: 0; + margin-right: 0; +} +.closeButtonClass:hover, +.closeButtonClass:focus { + color: #ffffff; + background-color: #5b476b; +} diff --git a/src/shared/components/ImageDeleteModal/index.ts b/src/shared/components/ImageDeleteModal/index.ts new file mode 100644 index 0000000..719d0ac --- /dev/null +++ b/src/shared/components/ImageDeleteModal/index.ts @@ -0,0 +1 @@ +export { ImageDeleteModal } from "./ImageDeleteModal"; diff --git a/src/shared/components/ImageNotes/ImageNotes.tsx b/src/shared/components/ImageNotes/ImageNotes.tsx new file mode 100644 index 0000000..8faba51 --- /dev/null +++ b/src/shared/components/ImageNotes/ImageNotes.tsx @@ -0,0 +1,80 @@ +import React, { memo } from 'react'; + +import { Icon } from 'Components/Icons'; +import { Button } from 'Components/Button'; +import { ImageDeleteModal } from 'Containers/ImageDeleteModal'; +import { areEqual } from 'Utils/equalityChecks'; +import { PhotoShareBreadCrumb } from 'Components/PhotoShare/PhotoShareBreadCrumb'; + +import { NoteItem } from './NoteItem/NoteItem'; + +import classes from './imageNotes.module.css'; + +type NoteItems = { + // eslint-disable-next-line + id: number; + // eslint-disable-next-line + content: string; +}; + +interface Props { + noteItems: Array; + isOpen?: boolean; + readonly?: boolean; + imageId?: number; + selectedPhoto: any; + modalCloseClick?: (e: any) => void; + openModal?: (e: any) => void; +} + +const ImageNotes = ({ + noteItems, + isOpen, + readonly = false, + openModal, + imageId, + selectedPhoto, + modalCloseClick, +}: Props) => ( +
    + {!readonly && ( +
    +
    + + +
    +
    + )} +
    + +
    + {noteItems.length > 0 && ( +
      + {noteItems.map((noteItem: NoteItems) => ( + + ))} +
    + )} + {!readonly && } +
    +); + +ImageNotes.defaultProps = { + isOpen: false, + readonly: undefined, + imageId: undefined, + modalCloseClick: undefined, + openModal: undefined, +}; + +const ImageNotesMemo = memo(ImageNotes, areEqual); + +export { ImageNotesMemo as ImageNotes }; diff --git a/src/shared/components/ImageNotes/NoteItem/NoteItem.tsx b/src/shared/components/ImageNotes/NoteItem/NoteItem.tsx new file mode 100644 index 0000000..41bf75d --- /dev/null +++ b/src/shared/components/ImageNotes/NoteItem/NoteItem.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './noteItem.module.css'; + +interface Props { + id: number; + content: string; +} + +const NoteItem = ({ id, content }: Props) => ( +
  • + {content} +
    • +); + +const NoteItemMemo = memo(NoteItem, areEqual); + +export { NoteItemMemo as NoteItem }; diff --git a/src/shared/components/ImageNotes/NoteItem/index.ts b/src/shared/components/ImageNotes/NoteItem/index.ts new file mode 100644 index 0000000..b35855e --- /dev/null +++ b/src/shared/components/ImageNotes/NoteItem/index.ts @@ -0,0 +1 @@ +export { NoteItem } from './NoteItem'; diff --git a/src/shared/components/ImageNotes/NoteItem/noteItem.module.css b/src/shared/components/ImageNotes/NoteItem/noteItem.module.css new file mode 100644 index 0000000..6747d70 --- /dev/null +++ b/src/shared/components/ImageNotes/NoteItem/noteItem.module.css @@ -0,0 +1,3 @@ +.noteCard { + padding: 1em; +} diff --git a/src/shared/components/ImageNotes/imageNotes.module.css b/src/shared/components/ImageNotes/imageNotes.module.css new file mode 100644 index 0000000..b905c69 --- /dev/null +++ b/src/shared/components/ImageNotes/imageNotes.module.css @@ -0,0 +1,56 @@ +.notesHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 0.5em; + border-bottom: 1px solid #e8e7ed; +} +.colouredButtonsWrapper { + display: flex; + justify-content: flex-start; + align-items: center; +} +.notesHeader button { + display: flex; + align-items: center; +} +.notesHeader .deleteButton svg { + transform: scale(0.7); +} +.notesHeader .deleteButton span { + color: #e82828; +} +.notesHeader .deleteButton svg path { + fill: #e82828; +} +.notesHeader .optionsButton { + font-weight: 500; + font-size: 14px; + line-height: 20px; + color: #9a00ff; +} +.notesHeader .optionsButton svg path { + fill: #9a00ff; +} +.optionsIconWrapper { + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #9a00ff; + height: 20px; + width: 20px; + border-radius: 30px; + margin-right: 0.7em; +} +.breadCrumb { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 17px; + color: #777185; + margin-bottom: 0; + padding-top: 16px; + text-align: center; + padding: 0 !important; +} diff --git a/src/shared/components/ImageNotes/index.ts b/src/shared/components/ImageNotes/index.ts new file mode 100644 index 0000000..51c5efe --- /dev/null +++ b/src/shared/components/ImageNotes/index.ts @@ -0,0 +1 @@ +export { ImageNotes } from "./ImageNotes"; diff --git a/src/shared/components/ImagePlaceHolder/ImagePlaceHolder.tsx b/src/shared/components/ImagePlaceHolder/ImagePlaceHolder.tsx new file mode 100644 index 0000000..b0dcb3b --- /dev/null +++ b/src/shared/components/ImagePlaceHolder/ImagePlaceHolder.tsx @@ -0,0 +1,22 @@ +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; +import classes from "./image.place.holder.module.css"; + +interface Props { + placeHolderClassName?: string; +} + +const ImagePlaceHolder = ({ placeHolderClassName }: Props) => ( +
    +); + +ImagePlaceHolder.defaultProps = { + placeHolderClassName: undefined, +}; +const ImagePlaceHolderMemo = memo(ImagePlaceHolder, areEqual); +export { ImagePlaceHolderMemo as ImagePlaceHolder }; diff --git a/src/shared/components/ImagePlaceHolder/image.place.holder.module.css b/src/shared/components/ImagePlaceHolder/image.place.holder.module.css new file mode 100644 index 0000000..ade1f9c --- /dev/null +++ b/src/shared/components/ImagePlaceHolder/image.place.holder.module.css @@ -0,0 +1,26 @@ +.dimensions { + height: 140px !important; + width: 140px !important; + border-radius: 8px; + margin: 0.25em; +} +.loadingImageBackground { + background: linear-gradient(134.11deg, #e8e7ed 2.7%, #d2cfda 53.61%, #e8e7ed 95.79%); + background-size: 400% 400%; + animation: gradient 3s ease infinite; +} +.pointer { + cursor: pointer; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} diff --git a/src/shared/components/ImagePlaceHolder/index.ts b/src/shared/components/ImagePlaceHolder/index.ts new file mode 100644 index 0000000..729a80f --- /dev/null +++ b/src/shared/components/ImagePlaceHolder/index.ts @@ -0,0 +1 @@ +export { ImagePlaceHolder } from "./ImagePlaceHolder"; diff --git a/src/shared/components/InviteEmployees/InviteEmployees.tsx b/src/shared/components/InviteEmployees/InviteEmployees.tsx new file mode 100644 index 0000000..3b96d21 --- /dev/null +++ b/src/shared/components/InviteEmployees/InviteEmployees.tsx @@ -0,0 +1,109 @@ +import React, { memo } from 'react'; + +import { areEqualShallow } from 'Utils/equalityChecks'; + +import { Icon } from 'Components/Icons'; +import { TextBox } from 'Components/TextBox'; +import { Form } from 'Components/Form'; +import { Label } from 'Components/Label'; +import { PurpleButton } from 'Components/Button'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { Modal } from 'Components/Modal'; +import { ValidateBackGround } from 'Components/Validation'; +import { InviteEmployeesToast } from './InviteEmployeesToast'; + +import classes from './inviteEmployees.module.css'; + +interface Props { + isOpen?: boolean; + emailLink: string; + inviteEmail: string; + isButtonDisabled: boolean; + formErrors: any; + showToast: boolean; + toastMessage: string; + onCopyClick: (e: any) => void; + onEmailChange: (e: any) => void; + onFormSubmit: (formData: any) => void; + onSendClick: (e: any) => void; + onClickCloseInviteEmployees: (e: any) => void; + header: any; + footer: any; +} + +const InviteEmployees = ({ + isOpen = false, + emailLink, + inviteEmail, + isButtonDisabled, + formErrors, + showToast, + toastMessage, + onCopyClick, + onEmailChange, + onFormSubmit, + onSendClick, + onClickCloseInviteEmployees, + header, + footer, +}: Props) => ( + } + > + {header} +
    +
    + + {emailLink} +
    + +
    + + Copy Link +
    +     +
    +

    Or Send by email

    +
    + + + +
    {formErrors?.email?.[0]}
    + + Send + +     +
    + {footer} +     +); + +InviteEmployees.defaultProps = { + isOpen: false, +}; + +// This to allows default props +const InviteEmployeesMemo = memo(InviteEmployees, areEqualShallow); + +export { InviteEmployeesMemo as InviteEmployees }; diff --git a/src/shared/components/InviteEmployees/InviteEmployeesToast/InviteEmployeesToast.tsx b/src/shared/components/InviteEmployees/InviteEmployeesToast/InviteEmployeesToast.tsx new file mode 100644 index 0000000..dc53728 --- /dev/null +++ b/src/shared/components/InviteEmployees/InviteEmployeesToast/InviteEmployeesToast.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { CheckedMarkSvg } from 'Components/Icons/CheckedMark'; + +import classes from './inviteEmployeesToast.module.css'; + +export interface Props { + showToast: boolean; + message: string; +} + +const InviteEmployeesToast = ({ showToast = false, message }: Props) => ( +
    +
    + {message} + + + +
    +
    +); + +InviteEmployeesToast.defaultProps = {}; + +const InviteEmployeesToastMemo = memo(InviteEmployeesToast, areEqual); + +export { InviteEmployeesToastMemo as InviteEmployeesToast }; diff --git a/src/shared/components/InviteEmployees/InviteEmployeesToast/index.ts b/src/shared/components/InviteEmployees/InviteEmployeesToast/index.ts new file mode 100644 index 0000000..d34ba58 --- /dev/null +++ b/src/shared/components/InviteEmployees/InviteEmployeesToast/index.ts @@ -0,0 +1 @@ +export { InviteEmployeesToast } from './InviteEmployeesToast'; diff --git a/src/shared/components/InviteEmployees/InviteEmployeesToast/inviteEmployeesToast.module.css b/src/shared/components/InviteEmployees/InviteEmployeesToast/inviteEmployeesToast.module.css new file mode 100644 index 0000000..0df7c9f --- /dev/null +++ b/src/shared/components/InviteEmployees/InviteEmployeesToast/inviteEmployeesToast.module.css @@ -0,0 +1,78 @@ +.toastBase { + height: 40px !important; + width: 100% !important; + z-index: 1000; + box-shadow: none; + border-radius: 0; + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + padding-top: 1rem !important; + padding-bottom: 1rem !important; + transition: opacity 0.15s linear; + position: absolute; + right: 0; + text-align: center; +} +.toast-body-override { + width: 95%; + padding: unset ip !important; +} +.toastCloseButtonContainer { + display: flex; + justify-content: flex-end; + width: 10%; +} +.toastCloseButton { + border-radius: 50% !important; + color: #5b476b !important; + background-color: #fff !important; + padding: 0.25rem !important; + opacity: unset !important; + /* This is the actual svg pulled from bootstrap. not the 0.5em beside center on the 2nd line. This is what has changed */ + background: transparent + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") + center/0.5em auto no-repeat; +} +.toastIcon { + padding-left: 10px; +} +.toastCloseButton:hover { + color: #000; + text-decoration: none; + opacity: unset !important; +} +.toastText { + font-family: IBM Plex Sans !important; + font-style: normal !important; + font-weight: 600 !important; + font-size: 16px !important; + line-height: 24px !important; + color: #5b476b !important; +} + +.toastSuccess { + background-color: #dcf5f0; + border-bottom: 1px solid #40c9ae !important; +} + +.toastWarning { + background-color: #fff0f0; + border-bottom: 1px solid #e82828; +} + +.toastCloseIcon { + position: absolute; + right: 22px; +} + +@media (max-width: 768px) { + .toastBase { + width: 100%; + /* height: auto; */ + padding: 12px 66px 12px 22px; + } + + .toastText { + font-size: 14px; + } +} diff --git a/src/shared/components/InviteEmployees/index.ts b/src/shared/components/InviteEmployees/index.ts new file mode 100644 index 0000000..eb8b314 --- /dev/null +++ b/src/shared/components/InviteEmployees/index.ts @@ -0,0 +1 @@ +export { InviteEmployees } from './InviteEmployees'; diff --git a/src/shared/components/InviteEmployees/inviteEmployees.module.css b/src/shared/components/InviteEmployees/inviteEmployees.module.css new file mode 100644 index 0000000..e969de2 --- /dev/null +++ b/src/shared/components/InviteEmployees/inviteEmployees.module.css @@ -0,0 +1,198 @@ +.peopleIcon { + position: absolute; + transform: scale(0.5); + width: 40px; + padding-left: 25px; + top: -70px; +} + +.linkContainer { + width: 420px; + height: 96px; + background: #f3f3f6; + border-radius: 8px; + margin: 24px auto; +} + +.linkIcon { + padding-left: 16px; + padding-top: 12px; + border-bottom: 1px solid #ffffff; + padding-bottom: 12px; +} + +.linkText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 24px; + color: #777185; + padding-left: 9px; +} + +.copyIcon { + padding-top: 10px; + padding-left: 17.4px; +} + +.copyText { + color: #5b476b; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + padding-left: 15px; + cursor: pointer; +} + +.optionText { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #777185; + text-align: center; + margin: 0 auto; + width: 420px; + display: flex; + align-items: center; +} + +.optionText::before, +.optionText::after { + content: ''; + flex: 1; + border-bottom: 1px solid #e8e7ed; +} + +.optionText:not(:empty)::before { + margin-right: 9px; +} + +.optionText:not(:empty)::after { + margin-left: 9px; +} + +.emailLabel { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #5b476b; + padding-left: 8px; +} + +.form { + max-width: 420px; + margin: 0 auto; + padding-top: 16px; +} + +.sendButton { + position: relative; + width: 136px; + height: 44px; + margin-top: 16px; + box-shadow: none !important; + margin-left: auto; + margin-bottom: 20px; +} + +.sendButton:disabled { + display: none; +} + +.modalTitle { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + color: #5b476b; + text-align: center; +} + +.modalHeader { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 0 0 0.5em 0; + border-color: #e8e7ed; + height: 40px; +} + +.modalBody { + padding: 0px 0px 12px 0px !important; + height: auto; +} + +.modalDialog { + max-width: 648px; +} + +.modalContent { + padding: 1.3em 1.5em; + box-shadow: 0px 24px 44px rgba(119, 113, 133, 0.2); + border-radius: 5px; +} + +.validateField { + background-image: unset !important; + border-color: unset !important; + border-top: unset !important; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + background-position: unset !important; + background-repeat: unset !important; + background-size: unset !important; + padding-top: 0.375rem !important; + padding-bottom: 0.375rem !important; + padding-right: 0.75rem !important; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #000000 !important; + padding-left: 8px; +} + +.validateField:focus { + border-color: rgba(154, 0, 255, 0.5) !important; +} +.validField { + border-bottom: 1px solid #d2cfda !important; +} + +.invalidField { + background-color: #fff0f0; + border-bottom: 1px solid #e82828 !important; +} + +.validateField::placeholder { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + /* Placeholder text color */ + color: #b3abc6; + /* opacity: 1; */ + /* Firefox */ +} + +.validateField:focus { + box-shadow: unset !important; + background-color: unset; +} + +.invalidFieldFeedback { + background-color: #fff !important; + margin-top: 0 !important; +} diff --git a/src/shared/components/Label/Label.tsx b/src/shared/components/Label/Label.tsx new file mode 100644 index 0000000..4b2ad4b --- /dev/null +++ b/src/shared/components/Label/Label.tsx @@ -0,0 +1,26 @@ +import React, { memo } from 'react'; +import { areEqualShallow } from 'Utils/equalityChecks'; + +export interface Props { + id?: string; + ariaLabel: string; + htmlFor?: string; + className?: string; + children: any; +} + +const Label = ({ id, ariaLabel, htmlFor, className, children }: Props) => ( + // If htmlFor is not passed, use the id + +); +Label.defaultProps = { + id: undefined, + htmlFor: undefined, + className: undefined, +}; + +const LabelMemo = memo(Label, areEqualShallow); + +export { LabelMemo as Label }; diff --git a/src/shared/components/Label/index.ts b/src/shared/components/Label/index.ts new file mode 100644 index 0000000..dd0252d --- /dev/null +++ b/src/shared/components/Label/index.ts @@ -0,0 +1 @@ +export { Label } from './Label'; diff --git a/src/shared/components/Layouts/DashboardLayout/DashboardLayout.tsx b/src/shared/components/Layouts/DashboardLayout/DashboardLayout.tsx new file mode 100644 index 0000000..8885f64 --- /dev/null +++ b/src/shared/components/Layouts/DashboardLayout/DashboardLayout.tsx @@ -0,0 +1,41 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { SideBar } from 'Containers/Dashboard'; +import { Nav } from 'Containers/Nav'; +import { Mask } from 'Components/Mask'; + +import classes from './dashboardLayout.module.css'; + +interface Props { + children: ReactNode; + sideBarDesktop: boolean; + sideBarMobile: boolean; + toggleSideBar: () => void; + pathname: string; +} + +const DashboardLayout = ({ children, sideBarDesktop, sideBarMobile, toggleSideBar, pathname }: Props) => ( +
    +
    + +
    +
    +
    +
    + {sideBarMobile && } +
    {children}
    +
    +
    +); + +const DashboardLayoutMemo = memo(DashboardLayout, areEqual); + +export { DashboardLayoutMemo as DashboardLayout }; diff --git a/src/shared/components/Layouts/DashboardLayout/dashboardLayout.module.css b/src/shared/components/Layouts/DashboardLayout/dashboardLayout.module.css new file mode 100644 index 0000000..8f44482 --- /dev/null +++ b/src/shared/components/Layouts/DashboardLayout/dashboardLayout.module.css @@ -0,0 +1,46 @@ +.dashboardBase { + background-color: #E5E5E5; + min-height: 100vh; + overflow-x: hidden; + z-index: 1; +} + +.mainContent { + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + position: relative; + left: 0; + padding-left: 265px; + transition: padding-left 300ms; +} + +.navBar { + width: 100%; + transition: width 1s; +} + +.content { + padding: 20px 25px; + width: 100%; +} + +/* + * sidebar closed styles +*/ + +.sideBarClosed .mainContent { + padding-left: 70px; +} + +/* + * Media queries +*/ + +@media screen and (max-width: 991px) { + .mainContent { + width: 100%; + padding-left: 0; + } +} diff --git a/src/shared/components/Layouts/DashboardLayout/index.ts b/src/shared/components/Layouts/DashboardLayout/index.ts new file mode 100644 index 0000000..b2848d6 --- /dev/null +++ b/src/shared/components/Layouts/DashboardLayout/index.ts @@ -0,0 +1 @@ +export { DashboardLayout } from './DashboardLayout'; diff --git a/src/shared/components/Layouts/GuestLayout/GuestLayout.tsx b/src/shared/components/Layouts/GuestLayout/GuestLayout.tsx new file mode 100644 index 0000000..0c63e28 --- /dev/null +++ b/src/shared/components/Layouts/GuestLayout/GuestLayout.tsx @@ -0,0 +1,39 @@ +import React, { memo, ReactNode } from 'react'; +import { Icon } from 'Components/Icons'; +import { Toast } from 'Components/Toast'; +import { Anchor } from 'Components/Anchor'; + +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './guestLayout.module.css'; + +interface Props { + children: ReactNode; +} + +const GuestLayout = ({ children }: Props) => ( + // This will contain the basic css used to display the Company Authentication UIs +
    +
    +
    +
    +
    + + + +

    Ready, set and blast off!

    +

    Welcome to Company.

    +
    +
    +
    +
    + +
    {children}
    +
    +
    +
    +); + +const GuestLayoutMemo = memo(GuestLayout, areEqual); + +export { GuestLayoutMemo as GuestLayout }; diff --git a/src/shared/components/Layouts/GuestLayout/guestLayout.module.css b/src/shared/components/Layouts/GuestLayout/guestLayout.module.css new file mode 100644 index 0000000..4859b09 --- /dev/null +++ b/src/shared/components/Layouts/GuestLayout/guestLayout.module.css @@ -0,0 +1,60 @@ +/* Bootstrap override */ +/* Remove the padding which was triggering scrollbars */ +/* .container-fluid-override { + padding: 0 !important; +} */ + +/* Remove the margins which were triggering scrollbars */ +.row-override { + margin: 0 !important; +} +.noPadding { + padding: 0 !important; +} +/* End Bootstrap override */ + +/* Custom Css */ +.leftContainer { + background: linear-gradient(149.9deg, #6d00e6 33.97%, #9601ff 78.44%); + min-height: 100vh; + padding: 0 1.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.rightContainer { + height: 100vh; + background: #fff; + overflow: auto; +} + +.logoDesktop { + max-width: 300px; + margin-bottom: 3em; +} +.logoDesktop > path { + fill: #ffffff; +} +.leftContainerCopy { + color: #ffffff; + max-width: 380px; + margin-top: 5em; +} +.title { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: calc(1.12em + 0.6vw); + line-height: calc(1.12em + 0.6vw); + margin-bottom: 0.7rem; + text-align: left; +} + +.lede { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 24px; +} diff --git a/src/shared/components/Layouts/GuestLayout/index.ts b/src/shared/components/Layouts/GuestLayout/index.ts new file mode 100644 index 0000000..fc8772d --- /dev/null +++ b/src/shared/components/Layouts/GuestLayout/index.ts @@ -0,0 +1 @@ +export { GuestLayout } from "./GuestLayout"; diff --git a/src/shared/components/Layouts/NotFoundLayout/NotFoundLayout.tsx b/src/shared/components/Layouts/NotFoundLayout/NotFoundLayout.tsx new file mode 100644 index 0000000..31ddcfb --- /dev/null +++ b/src/shared/components/Layouts/NotFoundLayout/NotFoundLayout.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; + +import { Icon } from 'Components/Icons'; +import { PurpleButton } from 'Components/Button/PurpleButton'; + +import { areEqual } from 'Utils/equalityChecks'; + +import classes from './notFoundLayout.module.css'; + +interface Props { + onFormButtonClick; +} + +const NotFoundLayout = ({ onFormButtonClick }: Props) => ( +
    + +
    +
    Page Not Found
    + +
    + + Go Back To Homepage + +
    + +
    Sorry, we couldn't find the page you were looking for.
    +
    + If you need any further assistance please contact our +
    + support team at - support@rocketplantech.com +
    +
    +
    +); + +const NotFoundLayoutMemo = memo(NotFoundLayout, areEqual); + +export { NotFoundLayoutMemo as NotFoundLayout }; diff --git a/src/shared/components/Layouts/NotFoundLayout/index.ts b/src/shared/components/Layouts/NotFoundLayout/index.ts new file mode 100644 index 0000000..9edcf64 --- /dev/null +++ b/src/shared/components/Layouts/NotFoundLayout/index.ts @@ -0,0 +1 @@ +export { NotFoundLayout } from './NotFoundLayout'; diff --git a/src/shared/components/Layouts/NotFoundLayout/notFoundLayout.module.css b/src/shared/components/Layouts/NotFoundLayout/notFoundLayout.module.css new file mode 100644 index 0000000..bc6a5a7 --- /dev/null +++ b/src/shared/components/Layouts/NotFoundLayout/notFoundLayout.module.css @@ -0,0 +1,47 @@ +.logo { + max-width: 148px; + margin-bottom: 3em; + padding-top: 24.45px; + padding-left: 24px; +} +.header { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: bold; + font-size: 48px; + line-height: 40px; + color: #5b476b; + padding-bottom: 50px; +} +.buttonContainer { + width: 320px; + height: 45px; + margin: 0 auto; +} +.notFoundIcon { + padding-top: 50px; + box-sizing: content-box; +} +.description { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 30px; + color: #777185; + padding-top: 56px; + margin: 0 auto; +} +.support { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 30px; + padding-top: 61px; + max-width: 500px; + margin: 0 auto; +} +.container { + text-align: center; +} diff --git a/src/shared/components/Layouts/PhotoShareLayout/PhotoShareLayout.tsx b/src/shared/components/Layouts/PhotoShareLayout/PhotoShareLayout.tsx new file mode 100644 index 0000000..2904c68 --- /dev/null +++ b/src/shared/components/Layouts/PhotoShareLayout/PhotoShareLayout.tsx @@ -0,0 +1,17 @@ +import React, { memo, ReactNode } from "react"; + +import { areEqual } from "Utils/equalityChecks"; + +import classes from "./photoShareLayout.module.css"; + +interface Props { + children: ReactNode; +} + +const PhotoShareLayout = ({ children }: Props) => ( +
    {children}
    +); + +const PhotoShareLayoutMemo = memo(PhotoShareLayout, areEqual); + +export { PhotoShareLayoutMemo as PhotoShareLayout }; diff --git a/src/shared/components/Layouts/PhotoShareLayout/index.ts b/src/shared/components/Layouts/PhotoShareLayout/index.ts new file mode 100644 index 0000000..4fb2689 --- /dev/null +++ b/src/shared/components/Layouts/PhotoShareLayout/index.ts @@ -0,0 +1 @@ +export { PhotoShareLayout } from "./PhotoShareLayout"; diff --git a/src/shared/components/Layouts/PhotoShareLayout/photoShareLayout.module.css b/src/shared/components/Layouts/PhotoShareLayout/photoShareLayout.module.css new file mode 100644 index 0000000..9a84922 --- /dev/null +++ b/src/shared/components/Layouts/PhotoShareLayout/photoShareLayout.module.css @@ -0,0 +1,45 @@ +.photoShareBase { + min-height: 100vh; + /* overflow-x: hidden; */ + z-index: 1; +} + +/* .mainContent { + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + position: relative; + left: 0; + padding-left: 265px; + transition: padding-left 300ms; +} */ + +/* .navBar { + width: 100%; + transition: width 1s; +} + +.content { + padding: 20px 25px; + width: 100%; +} */ + +/* + * sidebar closed styles +*/ + +/* .sideBarClosed .mainContent { + padding-left: 70px; +} */ + +/* + * Media queries +*/ +/* +@media screen and (max-width: 991px) { + .mainContent { + width: 100%; + padding-left: 0; + } +} */ diff --git a/src/shared/components/Layouts/PhotoViewLayout/PhotoViewLayout.tsx b/src/shared/components/Layouts/PhotoViewLayout/PhotoViewLayout.tsx new file mode 100644 index 0000000..6551e47 --- /dev/null +++ b/src/shared/components/Layouts/PhotoViewLayout/PhotoViewLayout.tsx @@ -0,0 +1,14 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import classes from './photoViewLayout.module.css'; + +interface Props { + children: ReactNode; +} + +const PhotoViewLayout = ({ children }: Props) =>
    {children}
    ; + +const PhotoViewLayoutMemo = memo(PhotoViewLayout, areEqual); + +export { PhotoViewLayoutMemo as PhotoViewLayout }; diff --git a/src/shared/components/Layouts/PhotoViewLayout/index.ts b/src/shared/components/Layouts/PhotoViewLayout/index.ts new file mode 100644 index 0000000..17673e5 --- /dev/null +++ b/src/shared/components/Layouts/PhotoViewLayout/index.ts @@ -0,0 +1 @@ +export { PhotoViewLayout } from "./PhotoViewLayout"; diff --git a/src/shared/components/Layouts/PhotoViewLayout/photoViewLayout.module.css b/src/shared/components/Layouts/PhotoViewLayout/photoViewLayout.module.css new file mode 100644 index 0000000..84a1e6f --- /dev/null +++ b/src/shared/components/Layouts/PhotoViewLayout/photoViewLayout.module.css @@ -0,0 +1,6 @@ +body { + background-color: #ffffff !important; +} +.photoViewBase { + min-height: 100vh; +} diff --git a/src/shared/components/Layouts/Placeholder/PlaceholderLayout.tsx b/src/shared/components/Layouts/Placeholder/PlaceholderLayout.tsx new file mode 100644 index 0000000..74935f0 --- /dev/null +++ b/src/shared/components/Layouts/Placeholder/PlaceholderLayout.tsx @@ -0,0 +1,22 @@ +import React, { memo } from "react"; + +import { RocketEmblemSvg } from "Components/Icons/RocketEmblem"; +import { areEqual } from "Utils/equalityChecks"; + +interface Props { + svgItem?: number; +} + +const PlaceholderLayout = ({ svgItem }: Props) => ( +
    + +
    +); + +PlaceholderLayout.defaultProps = { + svgItem: 1, +}; + +const PlaceholderLayoutMemo = memo(PlaceholderLayout, areEqual); + +export { PlaceholderLayoutMemo as PlaceholderLayout }; diff --git a/src/shared/components/Layouts/Placeholder/index.ts b/src/shared/components/Layouts/Placeholder/index.ts new file mode 100644 index 0000000..c22f5a2 --- /dev/null +++ b/src/shared/components/Layouts/Placeholder/index.ts @@ -0,0 +1 @@ +export { PlaceholderLayout } from './PlaceholderLayout'; diff --git a/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/ProjectTabsLayout.tsx b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/ProjectTabsLayout.tsx new file mode 100644 index 0000000..80458f2 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/ProjectTabsLayout.tsx @@ -0,0 +1,38 @@ +import React, { memo, ReactNode } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { TabsMenu } from 'Containers/Layouts/TabsMenu'; +import { ProjectOptions } from 'Containers/Project'; +import { ProjectUnavailable } from 'Components/Project'; +import { projectTabs } from 'Utils/tabs'; + +import classes from './projectTabsLayout.module.css'; + +interface Props { + tab: string; + projectUnavailable: boolean; + children: ReactNode; + onTabClick: (tab: string) => void; +} + +const ProjectTabsLayout = ({ children, tab, projectUnavailable, onTabClick }: Props) => ( +
    +
    +
    +
    +
    + + {!projectUnavailable && } +
    +
    + {projectUnavailable ? : children} +
    +
    +
    +
    +
    +); + +const ProjectTabsLayoutMemo = memo(ProjectTabsLayout, areEqual); + +export { ProjectTabsLayoutMemo as ProjectTabsLayout }; diff --git a/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/index.ts b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/index.ts new file mode 100644 index 0000000..961e922 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/index.ts @@ -0,0 +1 @@ +export { ProjectTabsLayout } from './ProjectTabsLayout'; diff --git a/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/projectTabsLayout.module.css b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/projectTabsLayout.module.css new file mode 100644 index 0000000..e62cf55 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/ProjectTabsLayout/projectTabsLayout.module.css @@ -0,0 +1,9 @@ +.projectsTabWrapper { + background-color: #ffffff; +} + +.tabsContainer { + width: 100%; + display: flex; + justify-content: space-between; +} diff --git a/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/TabsMenu.tsx b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/TabsMenu.tsx new file mode 100644 index 0000000..af6bee7 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/TabsMenu.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { Tab } from 'Components/Tabs/Tab'; + +import { width } from 'Utils/screen'; +import classes from './tabsMenu.module.css'; + +interface Props { + activeTab: string; + tabs: any[]; + onTabClick: (tab: string) => void; +} + +const TabsMenu = ({ activeTab, tabs, onTabClick }: Props) => ( +
      + {tabs.map(({ title, tab }: any) => ( + onTabClick(tab)} // limited usage, not recommend for reusable components + > + {title} + + ))} +
    +); + +const TabsMenuMemo = memo(TabsMenu, areEqual); + +export { TabsMenuMemo as TabsMenu }; diff --git a/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/index.ts b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/index.ts new file mode 100644 index 0000000..e63d034 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/index.ts @@ -0,0 +1 @@ +export { TabsMenu } from './TabsMenu'; diff --git a/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/tabsMenu.module.css b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/tabsMenu.module.css new file mode 100644 index 0000000..b9dfca0 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/TabsMenu/tabsMenu.module.css @@ -0,0 +1,26 @@ +.flexCenter { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.button { + min-width: 130px; +} + +.active-Tab, +.active-Tab:hover { + color: #ffffff !important; + font-weight: 600; + border-radius: 0 0 16px 16px; + background: linear-gradient(316.14deg, #6d00e6 1.84%, #9a00ff 96.25%) !important; +} +.active-Tab::after { + content: attr(data-text); + height: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; + font-weight: 600 !important; +} diff --git a/src/shared/components/Layouts/ProjectTabsLayout/index.ts b/src/shared/components/Layouts/ProjectTabsLayout/index.ts new file mode 100644 index 0000000..e2c7911 --- /dev/null +++ b/src/shared/components/Layouts/ProjectTabsLayout/index.ts @@ -0,0 +1,2 @@ +export { ProjectTabsLayout } from './ProjectTabsLayout'; +export { TabsMenu } from '../../TabsMenu'; diff --git a/src/shared/components/Layouts/SplashPageLayout/SplashPageLayout.tsx b/src/shared/components/Layouts/SplashPageLayout/SplashPageLayout.tsx new file mode 100644 index 0000000..51ecc64 --- /dev/null +++ b/src/shared/components/Layouts/SplashPageLayout/SplashPageLayout.tsx @@ -0,0 +1,15 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +interface Props { + children: ReactNode; +} + +const SplashPageLayout = ({ children }: Props) => ( +
    {children}
    +); + +const SplashPageLayoutMemo = memo(SplashPageLayout, areEqual); + +export { SplashPageLayoutMemo as SplashPageLayout }; diff --git a/src/shared/components/Layouts/SplashPageLayout/index.ts b/src/shared/components/Layouts/SplashPageLayout/index.ts new file mode 100644 index 0000000..444037a --- /dev/null +++ b/src/shared/components/Layouts/SplashPageLayout/index.ts @@ -0,0 +1 @@ +export { SplashPageLayout } from './SplashPageLayout'; diff --git a/src/shared/components/Layouts/UserTabsLayout/UserTabsLayout.tsx b/src/shared/components/Layouts/UserTabsLayout/UserTabsLayout.tsx new file mode 100644 index 0000000..8b8690f --- /dev/null +++ b/src/shared/components/Layouts/UserTabsLayout/UserTabsLayout.tsx @@ -0,0 +1,43 @@ +import React, { memo, ReactNode, useCallback } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; +import { useHistory } from 'react-router-dom'; + +import { TabsMenu } from 'Components/TabsMenu'; +import { userProfileTabs } from 'Utils/tabs'; + +import classes from './userTabsLayout.module.css'; + +interface Props { + tab: string; + children: ReactNode; +} + +const UserTabsLayout = ({ children, tab }: Props) => { + const history = useHistory(); + + // redirect to the specific tab route + const onTabClick = useCallback((tab: string) => { + history.push(`/user/${tab}`); + }, []); + + return ( +
    +
    +
    +
    +
    + +
    +
    + {children} +
    +
    +
    +
    +
    + ); +}; + +const UserTabsLayoutMemo = memo(UserTabsLayout, areEqual); + +export { UserTabsLayoutMemo as UserTabsLayout }; diff --git a/src/shared/components/Layouts/UserTabsLayout/index.ts b/src/shared/components/Layouts/UserTabsLayout/index.ts new file mode 100644 index 0000000..a8dac42 --- /dev/null +++ b/src/shared/components/Layouts/UserTabsLayout/index.ts @@ -0,0 +1 @@ +export { UserTabsLayout } from './UserTabsLayout'; diff --git a/src/shared/components/Layouts/UserTabsLayout/userTabsLayout.module.css b/src/shared/components/Layouts/UserTabsLayout/userTabsLayout.module.css new file mode 100644 index 0000000..7263fff --- /dev/null +++ b/src/shared/components/Layouts/UserTabsLayout/userTabsLayout.module.css @@ -0,0 +1,9 @@ +.userProfileTabWrapper { + background-color: #ffffff; +} + +.tabsContainer { + width: 100%; + display: flex; + justify-content: space-between; +} diff --git a/src/shared/components/Layouts/index.ts b/src/shared/components/Layouts/index.ts new file mode 100644 index 0000000..6032ca9 --- /dev/null +++ b/src/shared/components/Layouts/index.ts @@ -0,0 +1,6 @@ +export { GuestLayout } from './GuestLayout'; +export { DashboardLayout } from './DashboardLayout'; +export { PhotoViewLayout } from './PhotoViewLayout'; +export { SplashPageLayout } from './SplashPageLayout'; +export { PhotoShareLayout } from './PhotoShareLayout'; +export { NotFoundLayout } from './NotFoundLayout'; diff --git a/src/shared/components/MapPin/MapPin.tsx b/src/shared/components/MapPin/MapPin.tsx new file mode 100644 index 0000000..646ed17 --- /dev/null +++ b/src/shared/components/MapPin/MapPin.tsx @@ -0,0 +1,22 @@ +import { Icon } from 'Components/Icons'; +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +interface Props { + onClick: any; + selected: boolean; + // eslint-disable-next-line react/no-unused-prop-types + lat?: number; + // eslint-disable-next-line react/no-unused-prop-types + lng?: number; +} + +const MapPin = ({ onClick, selected }: Props) => ; + +MapPin.defaultProps = { + lat: 0, + lng: 0, +}; + +const MapPinMemo = memo(MapPin, areEqual); +export { MapPinMemo as MapPin }; diff --git a/src/shared/components/MapPin/index.ts b/src/shared/components/MapPin/index.ts new file mode 100644 index 0000000..351e041 --- /dev/null +++ b/src/shared/components/MapPin/index.ts @@ -0,0 +1 @@ +export { MapPin } from './MapPin'; diff --git a/src/shared/components/MapPin/mapPin.module.css b/src/shared/components/MapPin/mapPin.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/shared/components/Mask/Mask.tsx b/src/shared/components/Mask/Mask.tsx new file mode 100644 index 0000000..0b4a749 --- /dev/null +++ b/src/shared/components/Mask/Mask.tsx @@ -0,0 +1,24 @@ +import React, { memo } from "react"; + +import { areEqual } from "Utils/equalityChecks"; + +import classes from "./mask.module.css"; + +interface Props { + toggleSideBar: (e: any) => void; +} + +const Mask = ({ toggleSideBar }: Props) => ( + +); + +const MaskMemo = memo(Mask, areEqual); + +export { MaskMemo as Mask }; diff --git a/src/shared/components/Mask/index.ts b/src/shared/components/Mask/index.ts new file mode 100644 index 0000000..aa2cdb1 --- /dev/null +++ b/src/shared/components/Mask/index.ts @@ -0,0 +1 @@ +export { Mask } from './Mask'; diff --git a/src/shared/components/Mask/mask.module.css b/src/shared/components/Mask/mask.module.css new file mode 100644 index 0000000..6d23da6 --- /dev/null +++ b/src/shared/components/Mask/mask.module.css @@ -0,0 +1,9 @@ +.mask { + transition: opacity 600ms ease-out; + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.35); + overflow: hidden; + z-index: 999; +} diff --git a/src/shared/components/MobileWarningModal/MobileWarningModal.tsx b/src/shared/components/MobileWarningModal/MobileWarningModal.tsx new file mode 100644 index 0000000..26dfaa9 --- /dev/null +++ b/src/shared/components/MobileWarningModal/MobileWarningModal.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; + +import { Modal } from 'Components/Modal'; +import { Icon } from 'Components/Icons'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Button } from 'Components/Button'; + +import classes from './mobileWarningModal.module.css'; + +interface Props { + isOpen: boolean; + modalCloseClick: (e: any) => void; +} + +const MobileWarningModal = ({ isOpen, modalCloseClick }: Props) => ( + +

    We have an app!

    + +
    Try the Company iOS App with the link below
    + + App store link + +
    + Our Company WebApp isn’t optimized for mobile devices yet. We recommend using the iOS App for the best experience. +
    + +     +); + +const MobileWarningModalMemo = memo(MobileWarningModal, areEqual); + +export { MobileWarningModalMemo as MobileWarningModal }; diff --git a/src/shared/components/MobileWarningModal/index.ts b/src/shared/components/MobileWarningModal/index.ts new file mode 100644 index 0000000..0afe1be --- /dev/null +++ b/src/shared/components/MobileWarningModal/index.ts @@ -0,0 +1 @@ +export { MobileWarningModal } from './MobileWarningModal'; diff --git a/src/shared/components/MobileWarningModal/mobileWarningModal.module.css b/src/shared/components/MobileWarningModal/mobileWarningModal.module.css new file mode 100644 index 0000000..bb12061 --- /dev/null +++ b/src/shared/components/MobileWarningModal/mobileWarningModal.module.css @@ -0,0 +1,58 @@ +.modal { + font-family: IBM Plex Sans; + font-style: normal; + text-align: center; + background: white; +} + +.modalDialog { + height: 100%; + width: 100%; + margin: 0 auto; +} + +.modalContent { + height: 100%; + width: 100%; + border: unset; + border-radius: unset; +} + +.modalBody { + padding-top: 40px; +} + +.importantText { + padding-bottom: 25px; + + font-weight: bold; + font-size: 28px; + line-height: 40px; + + color: #000000; +} + +.image { + padding-top: 25px; + width: 150px; +} + +.text { + padding-top: 25px; + + font-weight: normal; + font-size: 16px; + line-height: 24px; + + color: #777185; +} + +.button { + padding-top: 25px; + + font-weight: 600; + font-size: 16px; + line-height: 24px; + + color: #5b476b; +} diff --git a/src/shared/components/Modal/Modal.tsx b/src/shared/components/Modal/Modal.tsx new file mode 100644 index 0000000..626305c --- /dev/null +++ b/src/shared/components/Modal/Modal.tsx @@ -0,0 +1,176 @@ +import React, { useEffect, useRef, useState, MouseEvent, ReactNode, memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { CloseButton } from 'Components/Button/CloseButton'; +import { Modal as BsModal } from 'bootstrap'; +import { Icon } from 'Components/Icons'; + +interface CssClasses { + modal?: string; + modalDialog?: string; + modalContent?: string; + modalHeader?: string; + modalTitle?: string; + modalBody?: string; + modalFooter?: string; + closeButtonClass?: string; + saveButtonClass?: string; +} + +interface Props { + // Attributes + children: ReactNode; + classes?: CssClasses; + id?: string; + title: string; + isOpen: boolean; + closeButtonText?: string; + modalHeader?: boolean; + leftHeaderIcon?: string; + modalFooter?: boolean; + useCircleCloseButton?: boolean; + footerButtons?: ReactNode; + // Data Attributes + dataBsBackdrop?: string; + dataBsKeyboard?: string; + // Events + modalOpen?: () => void; + onLeftHeaderIconClick?: (e: MouseEvent) => void; + modalCloseClick?: (e: MouseEvent) => void; + setIsOpen?: (isOpen: boolean) => void; + toast?: ReactNode; +} + +const Modal = ({ + children, + classes, + id = 'modalId', + title, + isOpen = false, + closeButtonText = 'Close', + modalHeader, + leftHeaderIcon, + modalFooter, + useCircleCloseButton = false, + footerButtons, + modalOpen, + onLeftHeaderIconClick, + modalCloseClick, + setIsOpen, + dataBsBackdrop, + dataBsKeyboard, + toast, +}: Props) => { + const [modal, setModal] = useState(null); + const modalRef = useRef(undefined); + + useEffect(() => { + // Instantiate the bs modal + if (!modal) setModal(new BsModal(modalRef.current)); + + // If the modal exists and the user wants it open, open it + if (modal && isOpen) { + modal.show(); + + // If the parent sends in a method to handle the modal open. + if (modalOpen) modalOpen(); + } + + // If the modal exists and the user wants it close, close it + if (modal && !isOpen) { + modal.hide(); + } + + return () => { + if (modal && isOpen) { + modal.hide(); + } + }; + }, [isOpen, modal]); + + const onModalOpeCloseClick = (e: MouseEvent) => { + e.preventDefault(); + modal.hide(); + + // If the parent sends in a method to handle the modal close, fire it + if (modalCloseClick) modalCloseClick(e); + + // Reset the isOpen prop, sent in by the parent + if (setIsOpen) setIsOpen(!isOpen); + }; + return ( +
    { + // Set the ref.current to the ref, before useEffect is called. + modalRef.current = ref; + }} + tabIndex={-1} + id={id} + aria-labelledby={id} + aria-hidden="true" + data-bs-backdrop={dataBsBackdrop} + data-bs-keyboard={dataBsKeyboard} + > +
    +
    + {modalHeader && ( +
    + {leftHeaderIcon && } +
    + {title} +
    + + + +
    + )} + +
    {children}
    + + {useCircleCloseButton && ( +
    + +
    + )} + + {modalFooter && ( +
    + + {footerButtons} +
    + )} + {toast} +
    +
    +
    + ); +}; + +Modal.defaultProps = { + classes: undefined, + id: undefined, + closeButtonText: undefined, + modalHeader: false, + leftHeaderIcon: undefined, + modalFooter: false, + modalOpen: undefined, + modalCloseClick: undefined, + onLeftHeaderIconClick: undefined, + setIsOpen: undefined, + useCircleCloseButton: false, + footerButtons: undefined, + dataBsBackdrop: 'static', + dataBsKeyboard: 'false', + toast: undefined, +}; + +const ModalMemo = memo(Modal, areEqual); +export { ModalMemo as Modal }; diff --git a/src/shared/components/Modal/index.ts b/src/shared/components/Modal/index.ts new file mode 100644 index 0000000..8deb0a3 --- /dev/null +++ b/src/shared/components/Modal/index.ts @@ -0,0 +1 @@ +export { Modal } from './Modal'; diff --git a/src/shared/components/Nav/Nav.tsx b/src/shared/components/Nav/Nav.tsx new file mode 100644 index 0000000..541217d --- /dev/null +++ b/src/shared/components/Nav/Nav.tsx @@ -0,0 +1,58 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; + +import { Icon } from 'Components/Icons'; + +import { PurpleButton } from 'Components/Button'; +import classes from './nav.module.css'; + +interface Props { + userAvatar: any; + firstName: string; + toggleSideBar: (e: any) => void; + toAccountOnClick: (e: any) => void; +} + +const Nav = ({ userAvatar, firstName, toggleSideBar, toAccountOnClick }: Props) => ( +
    +
    + +
    +
    +
    + {/* + Create Project + */} +
    + +
    + + + +
    + + +
    + + {userAvatar} + +
    +
    +
    +); + +const NavMemo = memo(Nav, areEqual); +export { NavMemo as Nav }; diff --git a/src/shared/components/Nav/index.ts b/src/shared/components/Nav/index.ts new file mode 100644 index 0000000..d21bdc2 --- /dev/null +++ b/src/shared/components/Nav/index.ts @@ -0,0 +1 @@ +export { Nav } from './Nav'; diff --git a/src/shared/components/Nav/nav.module.css b/src/shared/components/Nav/nav.module.css new file mode 100644 index 0000000..ef8007b --- /dev/null +++ b/src/shared/components/Nav/nav.module.css @@ -0,0 +1,101 @@ +.container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 10px 25px; + background-color: #ffffff; + width: 100%; + height: 70px; + -webkit-box-shadow: 0 1px 18px rgba(122, 111, 252, 0.15); + box-shadow: 0 1px 18px rgba(122, 111, 252, 0.15); + transition: height 300ms; +} + +.right { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-self: center; + align-items: center; + width: 25%; +} + +.buttonContainer { + margin-right: 24px; +} + +.createProjectButton { + width: 160px; + height: 44px; + padding: 0; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.welcomeContainer { + display: flex; + min-width: 86px; + max-width: 120px; + margin-right: 12px; +} + +.welcome { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 16px; + color: #000000; + text-decoration: none; +} + +.logo { + width: 22px; + height: 22px; +} + +.accountBox { + width: 40px; + height: 40px; + border-radius: 50%; + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 23px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #000000; + background-color: #d2cfda; +} + +.supportIconContainer { + margin-right: 16px; +} + +/* + * Media queries +*/ + +@media screen and (min-width: 991px) { + .hamburgerMenu { + display: none; + } +} + +@media screen and (max-width: 991px) { + .welcomeContainer { + display: none; + } + + .container { + height: 50px; + } +} diff --git a/src/shared/components/NoEmployeesPlaceholder/NoEmployeesPlaceholder.tsx b/src/shared/components/NoEmployeesPlaceholder/NoEmployeesPlaceholder.tsx new file mode 100644 index 0000000..e8e1c92 --- /dev/null +++ b/src/shared/components/NoEmployeesPlaceholder/NoEmployeesPlaceholder.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Icon } from '../Icons'; + +import classes from './noEmployeesPlaceholder.module.css'; + +const NoEmployeesPlaceholder = () => ( +
    +
    + +
    +

    You haven't added any employees yet

    +

    Go to the people section, and invite your employees to join your company!

    +
    +); + +const NoEmployeesPlaceholderMemo = memo(NoEmployeesPlaceholder, areEqual); + +export { NoEmployeesPlaceholderMemo as NoEmployeesPlaceholder }; diff --git a/src/shared/components/NoEmployeesPlaceholder/index.ts b/src/shared/components/NoEmployeesPlaceholder/index.ts new file mode 100644 index 0000000..334e982 --- /dev/null +++ b/src/shared/components/NoEmployeesPlaceholder/index.ts @@ -0,0 +1 @@ +export { NoEmployeesPlaceholder } from './NoEmployeesPlaceholder'; diff --git a/src/shared/components/NoEmployeesPlaceholder/noEmployeesPlaceholder.module.css b/src/shared/components/NoEmployeesPlaceholder/noEmployeesPlaceholder.module.css new file mode 100644 index 0000000..6465d6e --- /dev/null +++ b/src/shared/components/NoEmployeesPlaceholder/noEmployeesPlaceholder.module.css @@ -0,0 +1,31 @@ +.container { + width: 100%; + height: 450px; +} + +.peopleIcon { + text-align: center; + padding-bottom: 16px; +} + +.information { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #777185; +} + +.instructions { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #000000; + max-width: 271px; + margin: auto; +} diff --git a/src/shared/components/Notes/AllNotesAccordion/AllNotesAccordion.tsx b/src/shared/components/Notes/AllNotesAccordion/AllNotesAccordion.tsx new file mode 100644 index 0000000..ee46e39 --- /dev/null +++ b/src/shared/components/Notes/AllNotesAccordion/AllNotesAccordion.tsx @@ -0,0 +1,64 @@ +import React, { memo, ReactNode } from 'react'; + +import { areEqual } from 'Utils/equalityChecks'; +import { Button } from 'Components/Button'; +import { Icon } from 'Components/Icons'; +import classes from './allNotesAccordion.module.css'; + +interface Props { + children: ReactNode; + id: number; + icon?: string; + type: string; + title: string; + totalNoteCount: number; + isOpen: boolean; + onToggleClick?: (e: any) => void; +} + +const AllNotesAccordion = ({ children, id, icon, type, title, isOpen, totalNoteCount, onToggleClick }: Props) => ( +
    +
    +
    +
    +
    + +
    {title}
    +
    + + {!isOpen &&
    {`${totalNoteCount} Notes`}
    } + +
    +
    +
    {children}
    +
    +
    +
    +
    +); + +AllNotesAccordion.defaultProps = { + icon: undefined, + onToggleClick: undefined, +}; +const AllNotesAccordionMemo = memo(AllNotesAccordion, areEqual); + +export { AllNotesAccordionMemo as AllNotesAccordion }; diff --git a/src/shared/components/Notes/AllNotesAccordion/allNotesAccordion.module.css b/src/shared/components/Notes/AllNotesAccordion/allNotesAccordion.module.css new file mode 100644 index 0000000..8a3e57d --- /dev/null +++ b/src/shared/components/Notes/AllNotesAccordion/allNotesAccordion.module.css @@ -0,0 +1,66 @@ +.allNotesAccordion { + width: 100%; + margin-top: 24px; + position: relative; +} +.allNotesAccordion .itemWrapper { + border-radius: 16px; + border: 1px solid #d2cfda; +} + +.itemWrapperOpened { + border: 2px solid rgba(154, 0, 255, 0.5) !important; +} + +.notesHeader { + height: 68px; + margin: 0 24px; + border-bottom: 1px solid transparent; +} +.headerOpen { + border-color: #e8e7ed; +} +.titleArea { + flex: 3; +} + +.title { + font-family: IBM Plex Sans; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + color: #6d00e6; + margin-left: 8px; +} +.noteCountText { + color: #777185; + font-weight: 600; + font-size: 14px; + line-height: 20px; + margin-right: 18px; +} +.allNotesAccordion .buttonOverride { + max-width: 48px; + height: 40px; + padding: 1rem; + border-radius: 0 16px 16px 0 !important; +} +.allNotesAccordion .buttonOverride::after { + width: 24px; + height: 24px; + background-size: 24px; +} +.allNotesAccordion .openState:not(.closed)::after { + transform: rotate(-180deg); +} +.allNotesAccordion .openState:focus, +.buttonOverride:focus { + box-shadow: none !important; +} +.bodyOverride { + padding: 24px 24px 20px; +} +.loadMoreComments > * { + width: 100%; +} diff --git a/src/shared/components/Notes/AllNotesAccordion/index.ts b/src/shared/components/Notes/AllNotesAccordion/index.ts new file mode 100644 index 0000000..35b7eb0 --- /dev/null +++ b/src/shared/components/Notes/AllNotesAccordion/index.ts @@ -0,0 +1 @@ +export { AllNotesAccordion } from './AllNotesAccordion'; diff --git a/src/shared/components/Notes/CreateNoteForm/CreateNoteForm.tsx b/src/shared/components/Notes/CreateNoteForm/CreateNoteForm.tsx new file mode 100644 index 0000000..dd1e262 --- /dev/null +++ b/src/shared/components/Notes/CreateNoteForm/CreateNoteForm.tsx @@ -0,0 +1,72 @@ +import React, { memo } from 'react'; +import { areEqual } from 'Utils/equalityChecks'; + +import { Button } from 'Components/Button'; +import { TextArea } from 'Components/TextArea'; + +import formClasses from 'Themes/form/form.module.css'; +import classes from './createNoteForm.module.css'; + +interface Props { + errors?: any; + noteText: string; + placeholderText: string; + pinkBackground?: boolean; + disabled?: boolean; + onNoteChange: (e: any) => void; + onPostButtonClick: (e: any) => void; +} + +const CreateNoteForm = ({ + errors, + noteText, + placeholderText, + pinkBackground, + disabled, + onNoteChange, + onPostButtonClick, +}: Props) => ( + <> +
    +