diff --git a/.eslintrc.js b/.eslintrc.js index fb0309ac3..9cd531b9e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,7 @@ const extendsBase = [ 'plugin:import/typescript', 'plugin:jsx-a11y/recommended', 'plugin:react/recommended', + 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:testing-library/react', 'plugin:tailwindcss/recommended', @@ -29,12 +30,12 @@ const rulesBase = { 'brace-style': 'warn', 'prefer-template': 'warn', 'no-useless-concat': 'warn', - 'tailwindcss/no-custom-classname': ['off'], }; const typescriptRules = { ...rulesBase, '@typescript-eslint/no-explicit-any': 'warn', + '@typescript-eslint/no-empty-interface': 'off', '@typescript-eslint/prefer-nullish-coalescing': 'warn', '@typescript-eslint/array-type': ['warn', { default: 'array-simple' }], '@typescript-eslint/consistent-type-imports': ['warn', { fixStyle: 'inline-type-imports' }], diff --git a/.github/workflows/library-publish.yml b/.github/workflows/library-publish.yml index e0ded0dbb..b81c8abc8 100644 --- a/.github/workflows/library-publish.yml +++ b/.github/workflows/library-publish.yml @@ -6,7 +6,7 @@ on: - "*" env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: diff --git a/.github/workflows/library-release.yml b/.github/workflows/library-release.yml index 3e5269c53..4763b995a 100644 --- a/.github/workflows/library-release.yml +++ b/.github/workflows/library-release.yml @@ -13,7 +13,7 @@ on: - major env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: diff --git a/.github/workflows/library-test.yml b/.github/workflows/library-test.yml index fc35e77b6..acada9393 100644 --- a/.github/workflows/library-test.yml +++ b/.github/workflows/library-test.yml @@ -11,7 +11,7 @@ concurrency: cancel-in-progress: true env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: diff --git a/.github/workflows/storybook-preview-deploy.yml b/.github/workflows/storybook-preview-deploy.yml index b047fed79..b9ce2e304 100644 --- a/.github/workflows/storybook-preview-deploy.yml +++ b/.github/workflows/storybook-preview-deploy.yml @@ -7,7 +7,7 @@ on: - synchronize env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: @@ -41,8 +41,8 @@ jobs: run: pip install --user pyyaml packaging - name: Install ipfs-cluster-ctl run: | - wget https://dist.ipfs.io/ipfs-cluster-ctl/v1.0.0/ipfs-cluster-ctl_v1.0.0_linux-amd64.tar.gz - tar xvfz ipfs-cluster-ctl_v1.0.0_linux-amd64.tar.gz + wget https://dist.ipfs.tech/ipfs-cluster-ctl/v1.0.6/ipfs-cluster-ctl_v1.0.6_linux-amd64.tar.gz + tar xvfz ipfs-cluster-ctl_v1.0.6_linux-amd64.tar.gz - name: Unpin from IPFS continue-on-error: true if: steps.get-deployment.outputs.comment-id != 0 @@ -50,11 +50,11 @@ jobs: COMMENT='${{ steps.get-deployment.outputs.comment-body }}' IFS=" " read -ra array <<< "$COMMENT" hash=${array[3]} - ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' pin rm $hash + ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' pin rm $hash - name: Pin on IPFS id: ipfs-pin run: | - ipfsResult="$(./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' add -r './storybook-static' | tail -1)" + ipfsResult="$(./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' -s add -r './storybook-static' | tail -1)" IFS=" " read -ra array <<< "$ipfsResult" echo "hash=${array[1]}" >> $GITHUB_OUTPUT - name: Echo url diff --git a/.github/workflows/storybook-preview-remove.yml b/.github/workflows/storybook-preview-remove.yml index 1fa145e8a..c6320efa8 100644 --- a/.github/workflows/storybook-preview-remove.yml +++ b/.github/workflows/storybook-preview-remove.yml @@ -7,7 +7,7 @@ on: - closed env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: @@ -33,7 +33,7 @@ jobs: COMMENT='${{ steps.get-deployment.outputs.comment-body }}' IFS=" " read -ra array <<< "$COMMENT" hash=${array[3]} - ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' pin rm $hash + ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' pin rm $hash - name: Delete Comment uses: actions/github-script@v6.4.1 if: steps.get-deployment.outputs.comment-id != 0 diff --git a/.github/workflows/storybook-publish.yml b/.github/workflows/storybook-publish.yml index 04fba72cc..9d7a3eb56 100644 --- a/.github/workflows/storybook-publish.yml +++ b/.github/workflows/storybook-publish.yml @@ -6,7 +6,7 @@ on: - "*" env: - NODE_VERSION: 16 + NODE_VERSION: 18 NODE_CACHE: "yarn" jobs: diff --git a/.storybook/main.ts b/.storybook/main.ts index ac81dc611..0e8a6bc5d 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,22 +1,37 @@ import type { StorybookConfig } from '@storybook/react-webpack5'; +import type { RuleSetRule } from 'webpack'; const config: StorybookConfig = { - stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', - '@storybook/addon-interactions', - { - name: '@storybook/addon-styling', - options: { postCss: true }, - }, + { name: '@storybook/addon-styling', options: { postCss: true } }, + '@storybook/addon-designs', ], framework: { name: '@storybook/react-webpack5', options: {}, }, - docs: { - autodocs: 'tag', + staticDirs: ['../src/assets'], + webpackFinal: (webpackConfig) => { + // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook + const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => { + if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule)?.test instanceof RegExp) { + return (rule as Record).test?.test('.svg'); + } + }); + + if (typeof svgWebpackRule !== 'string') { + (svgWebpackRule as RuleSetRule).exclude = /\.svg$/; + } + + webpackConfig.module?.rules?.push({ + test: /\.svg$/, + use: ['@svgr/webpack'], + }); + + return webpackConfig; }, }; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 92de253b6..5b48c918b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,7 +1,4 @@ -import isPropValid from '@emotion/is-prop-valid'; import type { Preview } from '@storybook/react'; -import React from 'react'; -import { StyleSheetManager } from 'styled-components'; import '../index.css'; const preview: Preview = { @@ -13,18 +10,35 @@ const preview: Preview = { date: /Date$/, }, }, + options: { + storySort: { + method: 'alphabetical', + order: ['Docs', ['Open Design System', 'Installation'], 'Design Tokens', 'Components'], + }, + }, + backgrounds: { + default: 'neutral-50', + values: [ + { + name: 'neutral-0', + value: 'var(--ods-color-neutral-0)', + }, + { + name: 'neutral-50', + value: 'var(--ods-color-neutral-50)', + }, + { + name: 'neutral-800', + value: 'var(--ods-color-neutral-800)', + }, + ], + }, }, decorators: [ (Story) => ( - - typeof elementToBeRendered === 'string' ? isPropValid(propName) : true - } - > -
- -
- +
+ +
), ], }; diff --git a/CHANGELOG.md b/CHANGELOG.md index d02a3dd07..01becc290 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,241 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -## [0.3.2] - 2023-10-13 - -### Changed - -- `HeaderDao` favorited indicator to labelled button -- `HeaderDao` description line clamp indicator icon - -## [0.3.1] - 2023-10-12 - -### Changed - -- Updated `HeaderDao` dropdown item styling -- Updated `Dropdown` `:hover:focus` styling - -## [0.3.0] - 2023-10-10 - -### Changed - -- Update `TailwindCSS` dependencies to v3 -- Update `React` dependencies to v18 - -## [0.2.19] - 2023-10-09 - -### Added - -- mobile pagination - -### Fixed - -- Fix incorrect regex on Number Input that prevents "-" sign from being entered - -### Changed - -- Update `postcss` to 8.4.31 - -## [0.2.18] - 2023-09-29 - -### Added - -- Removed display of dao url and dao ens name from `HeaderDao`, substituted with dropdown component -- Introduced required `daoAddress` in `HeaderDao` -- Made `daoEnsName` optional in `HeaderDao` -- Renamed `copiedOnClick` to `onCopy` prop on `HeaderDao`, made `onCopy` accept copy input to be more generic -- Added `shortenDaoUrl` util - -## [0.2.17] - 2023-09-26 - -### Added - -- `IconSort` icon - -## [0.2.16] - 2023-09-22 - -### Added - -- `bannerContent` property to `CardProposal` component to allow for optionally display banner -- `bannerIcon` property to `CardProposal` component to allow optionally select icon for the banner - -## [0.2.15] - 2023-09-19 - -### Added - -- `containerClassName` property to `TextInput` component to make it more customisable - -### Fixed - -- Correctly udpate `WalletInput` display mode when changing the input value programmatically -- Fix racing conditions on `WalletInput` component when resolving ens-names and addresses - -### Changed - -- Removed `IconUpdate` fixed white color - -## [0.2.14] - 2023-09-12 - -### Added - -- `ActionItemAddress` component -- `IconUpdate` component - -### Changed - -- `Link` component to include description - -## [0.2.13] - 2023-08-31 - -### Fixed - -- Bump `@adobe/css-tools` from 4.2.0 to 4.3.1 -- Re-renders on `WalletInput` component when programmatically changing its value - -## [0.2.12] - 2023-08-23 - -### Changed - -- `VoterListItem` onClick action to open etherscan - -## [0.2.11] - 2023-08-23 - -### Fixed - -- Performances of `isEnsDomain` utility - -### Added - -- New `VoterListItem` Component -- Add `build:watch` script to re-build the library on file changes - -### Changed - -- `VotersTable` component according to new ODS designs - -## [0.2.10] - 2023-08-08 - -### Fixed - -- Disable page scroll when Modal component is open - -## [0.2.9] - 2023-07-31 - -### Fixed - -- Revert "remove scroll from modals and bottom sheet components" to fix scroll issues - -## [0.2.8] - 2023-07-26 - -### Added - -- New icons: IconExplore, IconShrink, IconRadioPause, IconQuestion, and IconFailure -- `acceptableFileFormat` property for InputImage component - -### Changed - -- Changed the contents of IconCopy and IconLinkExternal - -## [0.2.7] - 2023-07-24 - -### Changed - -- Changed the contents of IconFeedback - -### Added - -- `build:analyze` script to analyze bundle size - -### Fixed - -- Set correct padding and height for `input-wallet` and `input-number` components -- Preview workflow to correctly udpate preview comments on PRs -- Fix "unknown event handler" warning on input components - -## [0.2.6] - 2023-07-18 - -### Fixed - -- Set all dependencies as external - -## [0.2.5] - 2023-07-13 - -### Fixed - -- Remove scroll from modals and bottom sheet components - -## [0.2.4] - 2023-07-13 - -### Changed - -- Allow ENS address on address list-item component - -### Added - -- Workflows to deploy Storybook previews -- Step to enforce updates to changelog file - -## [0.2.3] - 2023-07-12 - -### Fixed - -- Correctly bundle library to avoid `undefined` dependencies - -## [0.2.2] - 2023-07-11 - -### Fixed - -- Add missing export for `breadcrumb` component - -## [0.2.1] - 2023-07-11 - -### Fixed - -- Add missing exports for components -- Fix `lint-staged` configuration file - -## [0.2.0] - 2023-07-11 - -### Added - -- All components, tests and stories from `@aragon/ui-components` package - -## [0.1.4] - 2023-07-11 - -### Changed - -- Downgrade `tailwindcss` dependency to v2 -- Remove `tailwind-merge` dependency, use `classnames` instead -- Bump `semver` from 5.7.1 to 5.7.2 - -### Added - -- CSS custom properties for design system - -### Fixed - -- Font size of Tag component -- Unknown option warning when running prettier - -## [0.1.3] - 2023-07-10 - -### Fixed - -- Entrypoint of library on `package.json` file - -## [0.1.2] - 2023-07-10 - -### Added - -- Export Tailwind configuration file - -### Changed - -- Path to `index.css` file, from `src/styles/index.css` to `/index.css` - -## [0.1.1] - 2023-07-10 - ### Added -- Setup of development tools for ODS library -- Tag component +- Initial v1.0 release of `@aragon/ods` library diff --git a/docs/Introduction.mdx b/docs/installation.mdx similarity index 59% rename from docs/Introduction.mdx rename to docs/installation.mdx index 3101ba445..3493c0d96 100644 --- a/docs/Introduction.mdx +++ b/docs/installation.mdx @@ -1,13 +1,10 @@ import { Meta } from '@storybook/blocks'; - + -# Aragon Open Design System +# Installation -Aragon Open Design System (Aragon ODS) is an open source and human-centric design system specifically designed for the Aragon App. -It provides a unified and easy-to-use framework for creating visually consistent and engaging interfaces that prioritize -user experience throughout the Aragon ecosystem. Aragon ODS is currently in alpha version, with documentation updates planned for Q2. -The developed components are expected to be available in the coming months. +TODO ## 1. Install the library diff --git a/docs/open-design-system.mdx b/docs/open-design-system.mdx new file mode 100644 index 000000000..d7a02ea6c --- /dev/null +++ b/docs/open-design-system.mdx @@ -0,0 +1,10 @@ +import { Meta } from '@storybook/blocks'; + + + +# Aragon Open Design System + +Aragon Open Design System (Aragon ODS) is an open source and human-centric design system specifically designed for the Aragon App. +It provides a unified and easy-to-use framework for creating visually consistent and engaging interfaces that prioritize +user experience throughout the Aragon ecosystem. Aragon ODS is currently in alpha version, with documentation updates planned for Q2. +The developed components are expected to be available in the coming months. diff --git a/index.css b/index.css index ffc9ffa47..2daaba0da 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,4 @@ -@import "./src/styles/colors.css"; -@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"); +@import "./src/styles/index.css"; @tailwind base; @tailwind components; diff --git a/jest.config.js b/jest.config.js index e26082773..1c285286b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,8 +7,8 @@ const config = { coveragePathIgnorePatterns: ['.d.ts', '.api.ts', 'index.ts', '.stories.tsx'], setupFilesAfterEnv: ['/src/test/setup.ts'], transform: { + '^.+\\.svg$': '/src/test/svgTransform.js', '^.+\\.tsx?$': 'ts-jest', - '^.+\\.svg$': '/src/test/svg-transform.js', }, }; diff --git a/package.json b/package.json index 56751edda..94511de44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aragon/ods", - "version": "0.3.2", + "version": "1.0.0", "description": "Implementation of the Aragon's Open Design System", "main": "dist/index.cjs.js", "types": "dist/types/index.d.ts", @@ -8,6 +8,8 @@ "files": [ "dist", "index.css", + "src/**/*.css", + "src/assets/fonts/*", "tailwind.config.js" ], "scripts": { @@ -39,79 +41,71 @@ ], "author": "Aragon Association", "dependencies": { - "@radix-ui/react-dialog": "^1.0.4", - "@radix-ui/react-dropdown-menu": "^2.0.5", - "@tiptap/extension-link": "^2.0.3", - "@tiptap/extension-placeholder": "^2.0.3", - "@tiptap/pm": "^2.0.3", - "@tiptap/react": "^2.0.3", - "@tiptap/starter-kit": "^2.0.3", + "@radix-ui/react-progress": "^1.0.3", "classnames": "^2.3.2", - "react": ">=18", - "react-blockies": "^1.4.1", - "react-dom": ">=18", - "react-dropzone": "^11.5.1", - "styled-components": ">=6", - "tailwindcss": ">=3", - "tailwindcss-fluid-type": ">=2" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tailwindcss": "^3.3.3" }, "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/preset-env": "^7.22.6", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@rollup/plugin-commonjs": "^25.0.2", - "@rollup/plugin-image": "^3.0.2", - "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-terser": "^0.4.3", - "@rollup/plugin-typescript": "^11.1.2", - "@storybook/addon-essentials": "^7.0.26", - "@storybook/addon-interactions": "^7.0.26", - "@storybook/addon-links": "^7.0.26", - "@storybook/addon-styling": "^1.3.2", - "@storybook/blocks": "^7.0.26", - "@storybook/react": "^7.0.26", - "@storybook/react-webpack5": "^7.0.26", + "@babel/core": "^7.23.0", + "@babel/preset-env": "^7.22.20", + "@babel/preset-react": "^7.22.15", + "@babel/preset-typescript": "^7.23.0", + "@rollup/plugin-commonjs": "^25.0.5", + "@rollup/plugin-image": "^3.0.3", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-terser": "^0.4.4", + "@rollup/plugin-typescript": "^11.1.5", + "@storybook/addon-designs": "^7.0.5", + "@storybook/addon-essentials": "^7.4.6", + "@storybook/addon-links": "^7.4.6", + "@storybook/addon-styling": "^1.3.7", + "@storybook/blocks": "^7.4.6", + "@storybook/react": "^7.4.6", + "@storybook/react-webpack5": "^7.4.6", "@storybook/storybook-deployer": "^2.8.16", - "@storybook/testing-library": "^0.2.0", - "@testing-library/jest-dom": "^6.1.0", + "@storybook/testing-library": "^0.2.2", + "@svgr/webpack": "^8.1.0", + "@testing-library/jest-dom": "^6.1.3", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.5", - "@types/react-blockies": "^1.4.1", - "@types/styled-components": "^5.0.0", - "@typescript-eslint/eslint-plugin": "^5.61.0", - "@typescript-eslint/parser": "^5.61.0", - "autoprefixer": "^10.4.14", + "@typescript-eslint/eslint-plugin": "^6.7.0", + "@typescript-eslint/parser": "^6.7.0", + "autoprefixer": "^10.4.15", "cross-env": "^7.0.3", - "eslint": "^8.44.0", - "eslint-plugin-import": "^2.27.5", + "eslint": "^8.49.0", + "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-storybook": "^0.6.12", + "eslint-plugin-storybook": "^0.6.13", "eslint-plugin-tailwindcss": "^3.13.0", - "eslint-plugin-testing-library": "^6.0.2", + "eslint-plugin-testing-library": "^6.0.1", "husky": "^8.0.3", - "jest": "^29.6.0", - "jest-environment-jsdom": "^29.6.0", - "lint-staged": "^13.2.3", - "postcss": "^8.4.24", - "prettier": "^2.8.8", - "prettier-plugin-organize-imports": "^3.2.2", - "prop-types": "^15.8.1", - "rollup": "^3.26.1", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "lint-staged": "^14.0.1", + "postcss": "^8.4.29", + "prettier": "^3.0.3", + "prettier-plugin-organize-imports": "^3.2.3", + "prettier-plugin-tailwindcss": "^0.5.4", + "rollup": "^4.0.2", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-visualizer": "^5.9.2", - "storybook": "^7.0.26", + "storybook": "^7.4.6", "ts-jest": "^29.1.1", - "typescript": "^5.1.5" + "typescript": "^5.2.2" + }, + "resolutions": { + "jackspeak": "2.1.1" }, "bugs": { "url": "https://github.com/aragon/ods/issues" }, "homepage": "https://github.com/aragon/ods#readme", "engines": { - "node": ">=16", + "node": ">=18", "npm": "please-use-yarn" } } diff --git a/prettier.config.js b/prettier.config.js index 52ef825d1..f30a478c5 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -21,11 +21,5 @@ module.exports = { }, }, ], - plugins: [ - require.resolve('prettier-plugin-organize-imports'), - // TODO: introduce tailwind prettier plugin after migration to Prettier v3 as not supported by V2 - // require('prettier-plugin-tailwindcss'), - ], - // TODO: introduce plugin options when prettier-plugin-tailwindcss is enabled - // tailwindFunctions: ['twMerge'], + plugins: [require.resolve('prettier-plugin-organize-imports'), 'prettier-plugin-tailwindcss'], }; diff --git a/src/@types/assets.d.ts b/src/@types/assets.d.ts index 31a80a9be..7a5e346d2 100644 --- a/src/@types/assets.d.ts +++ b/src/@types/assets.d.ts @@ -1,3 +1,4 @@ -declare module '*.png'; -declare module '*.svg'; -declare module '*.jpeg'; +declare module '*.svg' { + const ReactComponent: React.FC>; + export default ReactComponent; +} diff --git a/src/assets/avatar-token.svg b/src/assets/avatar-token.svg deleted file mode 100644 index 5aa20d650..000000000 --- a/src/assets/avatar-token.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/assets/fonts/Manrope-Regular.ttf b/src/assets/fonts/Manrope-Regular.ttf new file mode 100644 index 000000000..1a072330a Binary files /dev/null and b/src/assets/fonts/Manrope-Regular.ttf differ diff --git a/src/assets/fonts/Manrope-SemiBold.ttf b/src/assets/fonts/Manrope-SemiBold.ttf new file mode 100644 index 000000000..b6e9c2090 Binary files /dev/null and b/src/assets/fonts/Manrope-SemiBold.ttf differ diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg new file mode 100644 index 000000000..492f79ae2 --- /dev/null +++ b/src/assets/icons/add.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/app-community.svg b/src/assets/icons/app-community.svg new file mode 100644 index 000000000..9fc38d151 --- /dev/null +++ b/src/assets/icons/app-community.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/app-dashboard.svg b/src/assets/icons/app-dashboard.svg new file mode 100644 index 000000000..67eecce72 --- /dev/null +++ b/src/assets/icons/app-dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/app-finance.svg b/src/assets/icons/app-finance.svg new file mode 100644 index 000000000..c722b2b8e --- /dev/null +++ b/src/assets/icons/app-finance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/app-governance.svg b/src/assets/icons/app-governance.svg new file mode 100644 index 000000000..ec120b4e9 --- /dev/null +++ b/src/assets/icons/app-governance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/blockchain.svg b/src/assets/icons/blockchain.svg new file mode 100644 index 000000000..cfb4ff68d --- /dev/null +++ b/src/assets/icons/blockchain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg new file mode 100644 index 000000000..54177cbae --- /dev/null +++ b/src/assets/icons/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/checkbox-default.svg b/src/assets/icons/checkbox-default.svg new file mode 100644 index 000000000..ac3df3190 --- /dev/null +++ b/src/assets/icons/checkbox-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/checkbox-multi.svg b/src/assets/icons/checkbox-multi.svg new file mode 100644 index 000000000..2c1c4d593 --- /dev/null +++ b/src/assets/icons/checkbox-multi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/checkbox-selected.svg b/src/assets/icons/checkbox-selected.svg new file mode 100644 index 000000000..7975ae500 --- /dev/null +++ b/src/assets/icons/checkbox-selected.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/checkmark.svg b/src/assets/icons/checkmark.svg new file mode 100644 index 000000000..7fd1f9f5f --- /dev/null +++ b/src/assets/icons/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/chevron-down.svg b/src/assets/icons/chevron-down.svg new file mode 100644 index 000000000..9f03d1a67 --- /dev/null +++ b/src/assets/icons/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/chevron-left.svg b/src/assets/icons/chevron-left.svg new file mode 100644 index 000000000..a5fccca5e --- /dev/null +++ b/src/assets/icons/chevron-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/chevron-right.svg b/src/assets/icons/chevron-right.svg new file mode 100644 index 000000000..ff2398d9c --- /dev/null +++ b/src/assets/icons/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/chevron-up.svg b/src/assets/icons/chevron-up.svg new file mode 100644 index 000000000..d86977eee --- /dev/null +++ b/src/assets/icons/chevron-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/clock.svg b/src/assets/icons/clock.svg new file mode 100644 index 000000000..8558b00c4 --- /dev/null +++ b/src/assets/icons/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 000000000..04b614f2b --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/copy.svg b/src/assets/icons/copy.svg new file mode 100644 index 000000000..1e4ef62ac --- /dev/null +++ b/src/assets/icons/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/expand.svg b/src/assets/icons/expand.svg new file mode 100644 index 000000000..c16abaaa9 --- /dev/null +++ b/src/assets/icons/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/explore.svg b/src/assets/icons/explore.svg new file mode 100644 index 000000000..dbdc1ef0d --- /dev/null +++ b/src/assets/icons/explore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/favourite-default.svg b/src/assets/icons/favourite-default.svg new file mode 100644 index 000000000..6f99fa66f --- /dev/null +++ b/src/assets/icons/favourite-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/favourite-selected.svg b/src/assets/icons/favourite-selected.svg new file mode 100644 index 000000000..1fb2be060 --- /dev/null +++ b/src/assets/icons/favourite-selected.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/feedback.svg b/src/assets/icons/feedback.svg new file mode 100644 index 000000000..fc6d88972 --- /dev/null +++ b/src/assets/icons/feedback.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/filter.svg b/src/assets/icons/filter.svg new file mode 100644 index 000000000..d1305a153 --- /dev/null +++ b/src/assets/icons/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/flag.svg b/src/assets/icons/flag.svg new file mode 100644 index 000000000..2a0da0f08 --- /dev/null +++ b/src/assets/icons/flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/gas-fee.svg b/src/assets/icons/gas-fee.svg new file mode 100644 index 000000000..b8a3c47d8 --- /dev/null +++ b/src/assets/icons/gas-fee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg new file mode 100644 index 000000000..858add672 --- /dev/null +++ b/src/assets/icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100644 index 000000000..cac0a06cc --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/link-external.svg b/src/assets/icons/link-external.svg new file mode 100644 index 000000000..291a9a23b --- /dev/null +++ b/src/assets/icons/link-external.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/menu-default.svg b/src/assets/icons/menu-default.svg new file mode 100644 index 000000000..c4f6c4f67 --- /dev/null +++ b/src/assets/icons/menu-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/menu-horizontal.svg b/src/assets/icons/menu-horizontal.svg new file mode 100644 index 000000000..6d40e61e3 --- /dev/null +++ b/src/assets/icons/menu-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/menu-vertical.svg b/src/assets/icons/menu-vertical.svg new file mode 100644 index 000000000..e482c3af2 --- /dev/null +++ b/src/assets/icons/menu-vertical.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/person.svg b/src/assets/icons/person.svg new file mode 100644 index 000000000..8373b002e --- /dev/null +++ b/src/assets/icons/person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/question.svg b/src/assets/icons/question.svg new file mode 100644 index 000000000..398bcff06 --- /dev/null +++ b/src/assets/icons/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/radio-cancel.svg b/src/assets/icons/radio-cancel.svg new file mode 100644 index 000000000..b29208a0d --- /dev/null +++ b/src/assets/icons/radio-cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/radio-check.svg b/src/assets/icons/radio-check.svg new file mode 100644 index 000000000..0d86c591e --- /dev/null +++ b/src/assets/icons/radio-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/radio-default.svg b/src/assets/icons/radio-default.svg new file mode 100644 index 000000000..a8750776d --- /dev/null +++ b/src/assets/icons/radio-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/radio-pause.svg b/src/assets/icons/radio-pause.svg new file mode 100644 index 000000000..4b0d635fb --- /dev/null +++ b/src/assets/icons/radio-pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/radio-selected.svg b/src/assets/icons/radio-selected.svg new file mode 100644 index 000000000..d05dfbe2c --- /dev/null +++ b/src/assets/icons/radio-selected.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reload.svg b/src/assets/icons/reload.svg new file mode 100644 index 000000000..f380da967 --- /dev/null +++ b/src/assets/icons/reload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/remove.svg b/src/assets/icons/remove.svg new file mode 100644 index 000000000..c15c1e24d --- /dev/null +++ b/src/assets/icons/remove.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 000000000..74eead63a --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg new file mode 100644 index 000000000..7a6e6e99b --- /dev/null +++ b/src/assets/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/shrink.svg b/src/assets/icons/shrink.svg new file mode 100644 index 000000000..d5541a0a8 --- /dev/null +++ b/src/assets/icons/shrink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/sort.svg b/src/assets/icons/sort.svg new file mode 100644 index 000000000..7a25d6ec9 --- /dev/null +++ b/src/assets/icons/sort.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/switch.svg b/src/assets/icons/switch.svg new file mode 100644 index 000000000..347785bb0 --- /dev/null +++ b/src/assets/icons/switch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/turn-off.svg b/src/assets/icons/turn-off.svg new file mode 100644 index 000000000..a43e83bb0 --- /dev/null +++ b/src/assets/icons/turn-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/tx-deposit.svg b/src/assets/icons/tx-deposit.svg new file mode 100644 index 000000000..4717f1726 --- /dev/null +++ b/src/assets/icons/tx-deposit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/tx-failure.svg b/src/assets/icons/tx-failure.svg new file mode 100644 index 000000000..f14366888 --- /dev/null +++ b/src/assets/icons/tx-failure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/tx-smart-contract.svg b/src/assets/icons/tx-smart-contract.svg new file mode 100644 index 000000000..c03c9f4ea --- /dev/null +++ b/src/assets/icons/tx-smart-contract.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/tx-withdraw.svg b/src/assets/icons/tx-withdraw.svg new file mode 100644 index 000000000..cbdddf81f --- /dev/null +++ b/src/assets/icons/tx-withdraw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/update.svg b/src/assets/icons/update.svg new file mode 100644 index 000000000..11e8ce3b6 --- /dev/null +++ b/src/assets/icons/update.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/warning.svg b/src/assets/icons/warning.svg new file mode 100644 index 000000000..35f03d36f --- /dev/null +++ b/src/assets/icons/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-bold.svg b/src/assets/icons/wysiwyg-bold.svg new file mode 100644 index 000000000..3aaf1a07a --- /dev/null +++ b/src/assets/icons/wysiwyg-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-italic.svg b/src/assets/icons/wysiwyg-italic.svg new file mode 100644 index 000000000..7b9fe08e7 --- /dev/null +++ b/src/assets/icons/wysiwyg-italic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-link-set.svg b/src/assets/icons/wysiwyg-link-set.svg new file mode 100644 index 000000000..3f51a0fca --- /dev/null +++ b/src/assets/icons/wysiwyg-link-set.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-link-unset.svg b/src/assets/icons/wysiwyg-link-unset.svg new file mode 100644 index 000000000..504f9b908 --- /dev/null +++ b/src/assets/icons/wysiwyg-link-unset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-list-ordered.svg b/src/assets/icons/wysiwyg-list-ordered.svg new file mode 100644 index 000000000..c486dd089 --- /dev/null +++ b/src/assets/icons/wysiwyg-list-ordered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/wysiwyg-list-unordered.svg b/src/assets/icons/wysiwyg-list-unordered.svg new file mode 100644 index 000000000..330e619bb --- /dev/null +++ b/src/assets/icons/wysiwyg-list-unordered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/illustrations/human/accessories/buddha.svg b/src/assets/illustrations/human/accessories/buddha.svg new file mode 100644 index 000000000..9d47f2889 --- /dev/null +++ b/src/assets/illustrations/human/accessories/buddha.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/earrings-circle.svg b/src/assets/illustrations/human/accessories/earrings-circle.svg new file mode 100644 index 000000000..da81805f2 --- /dev/null +++ b/src/assets/illustrations/human/accessories/earrings-circle.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/earrings-hoops.svg b/src/assets/illustrations/human/accessories/earrings-hoops.svg new file mode 100644 index 000000000..364c2bbc6 --- /dev/null +++ b/src/assets/illustrations/human/accessories/earrings-hoops.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/earrings-rhombus.svg b/src/assets/illustrations/human/accessories/earrings-rhombus.svg new file mode 100644 index 000000000..874b5a8ed --- /dev/null +++ b/src/assets/illustrations/human/accessories/earrings-rhombus.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/earrings-skull.svg b/src/assets/illustrations/human/accessories/earrings-skull.svg new file mode 100644 index 000000000..f897e22e9 --- /dev/null +++ b/src/assets/illustrations/human/accessories/earrings-skull.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/earrings-thunder.svg b/src/assets/illustrations/human/accessories/earrings-thunder.svg new file mode 100644 index 000000000..859b9ecda --- /dev/null +++ b/src/assets/illustrations/human/accessories/earrings-thunder.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/expression.svg b/src/assets/illustrations/human/accessories/expression.svg new file mode 100644 index 000000000..93cd5aaf0 --- /dev/null +++ b/src/assets/illustrations/human/accessories/expression.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/flushed.svg b/src/assets/illustrations/human/accessories/flushed.svg new file mode 100644 index 000000000..23f1bcfc1 --- /dev/null +++ b/src/assets/illustrations/human/accessories/flushed.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/head-flower.svg b/src/assets/illustrations/human/accessories/head-flower.svg new file mode 100644 index 000000000..32cc0bd32 --- /dev/null +++ b/src/assets/illustrations/human/accessories/head-flower.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/piercings-tattoo.svg b/src/assets/illustrations/human/accessories/piercings-tattoo.svg new file mode 100644 index 000000000..269ce8462 --- /dev/null +++ b/src/assets/illustrations/human/accessories/piercings-tattoo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/accessories/piercings.svg b/src/assets/illustrations/human/accessories/piercings.svg new file mode 100644 index 000000000..cc81502ba --- /dev/null +++ b/src/assets/illustrations/human/accessories/piercings.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/aragon.svg b/src/assets/illustrations/human/bodies/aragon.svg new file mode 100644 index 000000000..9401d3485 --- /dev/null +++ b/src/assets/illustrations/human/bodies/aragon.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/blocks.svg b/src/assets/illustrations/human/bodies/blocks.svg new file mode 100644 index 000000000..9ef6efbc2 --- /dev/null +++ b/src/assets/illustrations/human/bodies/blocks.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/chart.svg b/src/assets/illustrations/human/bodies/chart.svg new file mode 100644 index 000000000..0b8e0003f --- /dev/null +++ b/src/assets/illustrations/human/bodies/chart.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/computer-correct.svg b/src/assets/illustrations/human/bodies/computer-correct.svg new file mode 100644 index 000000000..52a12a954 --- /dev/null +++ b/src/assets/illustrations/human/bodies/computer-correct.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/computer.svg b/src/assets/illustrations/human/bodies/computer.svg new file mode 100644 index 000000000..a8b1594c8 --- /dev/null +++ b/src/assets/illustrations/human/bodies/computer.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/correct.svg b/src/assets/illustrations/human/bodies/correct.svg new file mode 100644 index 000000000..bab9fc256 --- /dev/null +++ b/src/assets/illustrations/human/bodies/correct.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/double-correct.svg b/src/assets/illustrations/human/bodies/double-correct.svg new file mode 100644 index 000000000..a3aa165e4 --- /dev/null +++ b/src/assets/illustrations/human/bodies/double-correct.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/elevating.svg b/src/assets/illustrations/human/bodies/elevating.svg new file mode 100644 index 000000000..429ef86a6 --- /dev/null +++ b/src/assets/illustrations/human/bodies/elevating.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/relaxed.svg b/src/assets/illustrations/human/bodies/relaxed.svg new file mode 100644 index 000000000..60bb48505 --- /dev/null +++ b/src/assets/illustrations/human/bodies/relaxed.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/sending-love.svg b/src/assets/illustrations/human/bodies/sending-love.svg new file mode 100644 index 000000000..c768279c6 --- /dev/null +++ b/src/assets/illustrations/human/bodies/sending-love.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/bodies/voting.svg b/src/assets/illustrations/human/bodies/voting.svg new file mode 100644 index 000000000..1b29ef034 --- /dev/null +++ b/src/assets/illustrations/human/bodies/voting.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/angry.svg b/src/assets/illustrations/human/expressions/angry.svg new file mode 100644 index 000000000..2beb64635 --- /dev/null +++ b/src/assets/illustrations/human/expressions/angry.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/casual.svg b/src/assets/illustrations/human/expressions/casual.svg new file mode 100644 index 000000000..240eaee85 --- /dev/null +++ b/src/assets/illustrations/human/expressions/casual.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/crying.svg b/src/assets/illustrations/human/expressions/crying.svg new file mode 100644 index 000000000..07d5c525f --- /dev/null +++ b/src/assets/illustrations/human/expressions/crying.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/decided.svg b/src/assets/illustrations/human/expressions/decided.svg new file mode 100644 index 000000000..d7bfb2d6b --- /dev/null +++ b/src/assets/illustrations/human/expressions/decided.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/excited.svg b/src/assets/illustrations/human/expressions/excited.svg new file mode 100644 index 000000000..1e63c2f24 --- /dev/null +++ b/src/assets/illustrations/human/expressions/excited.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/sad-left.svg b/src/assets/illustrations/human/expressions/sad-left.svg new file mode 100644 index 000000000..d93a540f0 --- /dev/null +++ b/src/assets/illustrations/human/expressions/sad-left.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/sad-right.svg b/src/assets/illustrations/human/expressions/sad-right.svg new file mode 100644 index 000000000..ae000f88c --- /dev/null +++ b/src/assets/illustrations/human/expressions/sad-right.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/smile-wink.svg b/src/assets/illustrations/human/expressions/smile-wink.svg new file mode 100644 index 000000000..502d19974 --- /dev/null +++ b/src/assets/illustrations/human/expressions/smile-wink.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/smile.svg b/src/assets/illustrations/human/expressions/smile.svg new file mode 100644 index 000000000..697bdfcd5 --- /dev/null +++ b/src/assets/illustrations/human/expressions/smile.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/surprised.svg b/src/assets/illustrations/human/expressions/surprised.svg new file mode 100644 index 000000000..19f1cd306 --- /dev/null +++ b/src/assets/illustrations/human/expressions/surprised.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/expressions/suspecting.svg b/src/assets/illustrations/human/expressions/suspecting.svg new file mode 100644 index 000000000..4bbbba8ae --- /dev/null +++ b/src/assets/illustrations/human/expressions/suspecting.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/afro.svg b/src/assets/illustrations/human/hairs/afro.svg new file mode 100644 index 000000000..27787bd51 --- /dev/null +++ b/src/assets/illustrations/human/hairs/afro.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/bald.svg b/src/assets/illustrations/human/hairs/bald.svg new file mode 100644 index 000000000..561a68ede --- /dev/null +++ b/src/assets/illustrations/human/hairs/bald.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/bun.svg b/src/assets/illustrations/human/hairs/bun.svg new file mode 100644 index 000000000..796ec25c3 --- /dev/null +++ b/src/assets/illustrations/human/hairs/bun.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/cool.svg b/src/assets/illustrations/human/hairs/cool.svg new file mode 100644 index 000000000..47b4b3154 --- /dev/null +++ b/src/assets/illustrations/human/hairs/cool.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/curly-bangs.svg b/src/assets/illustrations/human/hairs/curly-bangs.svg new file mode 100644 index 000000000..5c679f2f2 --- /dev/null +++ b/src/assets/illustrations/human/hairs/curly-bangs.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/curly.svg b/src/assets/illustrations/human/hairs/curly.svg new file mode 100644 index 000000000..3aa9c98fd --- /dev/null +++ b/src/assets/illustrations/human/hairs/curly.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/informal.svg b/src/assets/illustrations/human/hairs/informal.svg new file mode 100644 index 000000000..1ec9306a8 --- /dev/null +++ b/src/assets/illustrations/human/hairs/informal.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/long.svg b/src/assets/illustrations/human/hairs/long.svg new file mode 100644 index 000000000..b8902b2b0 --- /dev/null +++ b/src/assets/illustrations/human/hairs/long.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/middle.svg b/src/assets/illustrations/human/hairs/middle.svg new file mode 100644 index 000000000..565fba7ec --- /dev/null +++ b/src/assets/illustrations/human/hairs/middle.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/oldschool.svg b/src/assets/illustrations/human/hairs/oldschool.svg new file mode 100644 index 000000000..9c9a3520b --- /dev/null +++ b/src/assets/illustrations/human/hairs/oldschool.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/punk.svg b/src/assets/illustrations/human/hairs/punk.svg new file mode 100644 index 000000000..091855185 --- /dev/null +++ b/src/assets/illustrations/human/hairs/punk.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/hairs/short.svg b/src/assets/illustrations/human/hairs/short.svg new file mode 100644 index 000000000..96f354f81 --- /dev/null +++ b/src/assets/illustrations/human/hairs/short.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/big-rounded.svg b/src/assets/illustrations/human/sunglasses/big-rounded.svg new file mode 100644 index 000000000..0ede80eef --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/big-rounded.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/big-semirounded.svg b/src/assets/illustrations/human/sunglasses/big-semirounded.svg new file mode 100644 index 000000000..a56ad74b3 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/big-semirounded.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/large-stylized-xl.svg b/src/assets/illustrations/human/sunglasses/large-stylized-xl.svg new file mode 100644 index 000000000..ff11e0e63 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/large-stylized-xl.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/large-stylized.svg b/src/assets/illustrations/human/sunglasses/large-stylized.svg new file mode 100644 index 000000000..c920e38d6 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/large-stylized.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/pirate.svg b/src/assets/illustrations/human/sunglasses/pirate.svg new file mode 100644 index 000000000..d65a8da73 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/pirate.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/small-intellectual.svg b/src/assets/illustrations/human/sunglasses/small-intellectual.svg new file mode 100644 index 000000000..902a0924f --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/small-intellectual.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/small-sympathetic.svg b/src/assets/illustrations/human/sunglasses/small-sympathetic.svg new file mode 100644 index 000000000..d4bebfba8 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/small-sympathetic.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/small-weird-one.svg b/src/assets/illustrations/human/sunglasses/small-weird-one.svg new file mode 100644 index 000000000..07d80a05e --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/small-weird-one.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/small-weird-two.svg b/src/assets/illustrations/human/sunglasses/small-weird-two.svg new file mode 100644 index 000000000..6c263750a --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/small-weird-two.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/thuglife-rounded.svg b/src/assets/illustrations/human/sunglasses/thuglife-rounded.svg new file mode 100644 index 000000000..07e16f05b --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/thuglife-rounded.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/human/sunglasses/thuglife.svg b/src/assets/illustrations/human/sunglasses/thuglife.svg new file mode 100644 index 000000000..bc69e8f39 --- /dev/null +++ b/src/assets/illustrations/human/sunglasses/thuglife.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/action.svg b/src/assets/illustrations/objects/action.svg new file mode 100644 index 000000000..c506360f5 --- /dev/null +++ b/src/assets/illustrations/objects/action.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/app.svg b/src/assets/illustrations/objects/app.svg new file mode 100644 index 000000000..1f7a5e6da --- /dev/null +++ b/src/assets/illustrations/objects/app.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/archive.svg b/src/assets/illustrations/objects/archive.svg new file mode 100644 index 000000000..d5222fdb2 --- /dev/null +++ b/src/assets/illustrations/objects/archive.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/book.svg b/src/assets/illustrations/objects/book.svg new file mode 100644 index 000000000..0e2e5acf8 --- /dev/null +++ b/src/assets/illustrations/objects/book.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/build.svg b/src/assets/illustrations/objects/build.svg new file mode 100644 index 000000000..86afb3999 --- /dev/null +++ b/src/assets/illustrations/objects/build.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/chain.svg b/src/assets/illustrations/objects/chain.svg new file mode 100644 index 000000000..40e78484c --- /dev/null +++ b/src/assets/illustrations/objects/chain.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/database.svg b/src/assets/illustrations/objects/database.svg new file mode 100644 index 000000000..422212c99 --- /dev/null +++ b/src/assets/illustrations/objects/database.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/error.svg b/src/assets/illustrations/objects/error.svg new file mode 100644 index 000000000..078317ea3 --- /dev/null +++ b/src/assets/illustrations/objects/error.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/explore.svg b/src/assets/illustrations/objects/explore.svg new file mode 100644 index 000000000..ce66b6df2 --- /dev/null +++ b/src/assets/illustrations/objects/explore.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/gas.svg b/src/assets/illustrations/objects/gas.svg new file mode 100644 index 000000000..aa32690d2 --- /dev/null +++ b/src/assets/illustrations/objects/gas.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/goal.svg b/src/assets/illustrations/objects/goal.svg new file mode 100644 index 000000000..746776734 --- /dev/null +++ b/src/assets/illustrations/objects/goal.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/labels.svg b/src/assets/illustrations/objects/labels.svg new file mode 100644 index 000000000..22d094d55 --- /dev/null +++ b/src/assets/illustrations/objects/labels.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/lightbulb.svg b/src/assets/illustrations/objects/lightbulb.svg new file mode 100644 index 000000000..9da1b8735 --- /dev/null +++ b/src/assets/illustrations/objects/lightbulb.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/magnifying-glass.svg b/src/assets/illustrations/objects/magnifying-glass.svg new file mode 100644 index 000000000..65f78bd00 --- /dev/null +++ b/src/assets/illustrations/objects/magnifying-glass.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/not-found.svg b/src/assets/illustrations/objects/not-found.svg new file mode 100644 index 000000000..83b7aedc6 --- /dev/null +++ b/src/assets/illustrations/objects/not-found.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/security.svg b/src/assets/illustrations/objects/security.svg new file mode 100644 index 000000000..9d935223f --- /dev/null +++ b/src/assets/illustrations/objects/security.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/settings.svg b/src/assets/illustrations/objects/settings.svg new file mode 100644 index 000000000..352964fa5 --- /dev/null +++ b/src/assets/illustrations/objects/settings.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/smart-contract.svg b/src/assets/illustrations/objects/smart-contract.svg new file mode 100644 index 000000000..0e06d7ae9 --- /dev/null +++ b/src/assets/illustrations/objects/smart-contract.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/success.svg b/src/assets/illustrations/objects/success.svg new file mode 100644 index 000000000..de087eed3 --- /dev/null +++ b/src/assets/illustrations/objects/success.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/users.svg b/src/assets/illustrations/objects/users.svg new file mode 100644 index 000000000..ae00d70c3 --- /dev/null +++ b/src/assets/illustrations/objects/users.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/wagmi.svg b/src/assets/illustrations/objects/wagmi.svg new file mode 100644 index 000000000..1fcac7c37 --- /dev/null +++ b/src/assets/illustrations/objects/wagmi.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/wallet.svg b/src/assets/illustrations/objects/wallet.svg new file mode 100644 index 000000000..fa45dab19 --- /dev/null +++ b/src/assets/illustrations/objects/wallet.svg @@ -0,0 +1 @@ + diff --git a/src/assets/illustrations/objects/warning.svg b/src/assets/illustrations/objects/warning.svg new file mode 100644 index 000000000..15259452e --- /dev/null +++ b/src/assets/illustrations/objects/warning.svg @@ -0,0 +1 @@ + diff --git a/src/components/actionItem/actionItem.stories.tsx b/src/components/actionItem/actionItem.stories.tsx new file mode 100644 index 000000000..7c957a030 --- /dev/null +++ b/src/components/actionItem/actionItem.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ActionItem } from './actionItem'; + +const meta: Meta = { + title: 'components/ActionItem', + component: ActionItem, + tags: ['autodocs'], + argTypes: { + href: { control: 'text' }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=8011-19523&mode=design&t=Uyx4LVxxahHwn8mg-4', + }, + }, +}; + +type Story = StoryObj; + +/** + * Default usage example of the ActionItem component. + */ +export const Default: Story = { + args: { + className: 'min-w-[320px]', + href: 'https://www.aragon.org', + children: ( +
+

Title

+

Description

+
+ ), + }, +}; + +export default meta; diff --git a/src/components/actionItem/actionItem.test.tsx b/src/components/actionItem/actionItem.test.tsx new file mode 100644 index 000000000..296d32def --- /dev/null +++ b/src/components/actionItem/actionItem.test.tsx @@ -0,0 +1,21 @@ +import { render, screen } from '@testing-library/react'; +import { IconType } from '../icon'; +import { ActionItem, type IActionItemProps } from './actionItem'; + +describe(' component', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IActionItemProps = { ...props }; + + return ; + }; + + it('renders the action item component', () => { + const children = 'action-item-content'; + const href = '/test'; + render(createTestComponent({ href, children })); + const link = screen.getByRole('link', { name: children }); + expect(link).toBeInTheDocument(); + expect(link.href).toContain(href); + expect(screen.getByTestId(IconType.CHEVRON_RIGHT)).toBeInTheDocument(); + }); +}); diff --git a/src/components/actionItem/actionItem.tsx b/src/components/actionItem/actionItem.tsx new file mode 100644 index 000000000..a1f011747 --- /dev/null +++ b/src/components/actionItem/actionItem.tsx @@ -0,0 +1,26 @@ +import classNames from 'classnames'; +import type { AnchorHTMLAttributes } from 'react'; +import { Icon, IconType } from '../icon'; + +export interface IActionItemProps extends AnchorHTMLAttributes {} + +export const ActionItem: React.FC = (props) => { + const { children, className, ...otherProps } = props; + + return ( + + {children} + + + ); +}; diff --git a/src/components/actionItem/index.ts b/src/components/actionItem/index.ts new file mode 100644 index 000000000..c217eb798 --- /dev/null +++ b/src/components/actionItem/index.ts @@ -0,0 +1 @@ +export { ActionItem, type IActionItemProps } from './actionItem'; diff --git a/src/components/alerts/alertBanner.stories.tsx b/src/components/alerts/alertBanner.stories.tsx deleted file mode 100644 index 74a4a95c3..000000000 --- a/src/components/alerts/alertBanner.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertBanner, type AlertBannerProps } from './alertBanner'; - -export default { - title: 'Components/Alerts/Banner', - component: AlertBanner, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'info', - label: 'Testnet Active', -}; diff --git a/src/components/alerts/alertBanner.test.tsx b/src/components/alerts/alertBanner.test.tsx deleted file mode 100644 index 9901e56cd..000000000 --- a/src/components/alerts/alertBanner.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertBanner } from './alertBanner'; - -describe('AlertBanner', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByRole('alert'); - } - - test('should render without crashing', () => { - const element = setup({ label: 'Test Message' }); - expect(element).toBeInTheDocument; - expect(screen.getByText(/test/i)).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertBanner.tsx b/src/components/alerts/alertBanner.tsx deleted file mode 100644 index 135933fb8..000000000 --- a/src/components/alerts/alertBanner.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -export type AlertBannerProps = { - /** type and severity of alert */ - mode?: 'info' | 'success' | 'warning' | 'critical'; - - /** alert copy */ - label: string; -}; - -export const AlertBanner: React.FC = ({ mode = 'info', label }) => { - return ( - - {label} - - ); -}; - -const styles = { - info: 'text-info-900 bg-info-100', - success: 'text-success-900 bg-success-100', - warning: 'text-warning-900 bg-warning-100', - critical: 'text-critical-900 bg-critical-100', -}; - -type ContainerProps = { - mode: NonNullable; -}; - -const Container = styled.div.attrs(({ mode }) => ({ - className: `ft-text-xs py-0.5 px-2 text-center font-bold ${styles[mode]}`, -}))``; diff --git a/src/components/alerts/alertCard.stories.tsx b/src/components/alerts/alertCard.stories.tsx deleted file mode 100644 index 972b64b6f..000000000 --- a/src/components/alerts/alertCard.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertCard, type AlertCardProps } from './alertCard'; - -export default { - title: 'Components/Alerts/Card', - component: AlertCard, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'info', - title: 'This is a title', - helpText: 'This is a help text', -}; diff --git a/src/components/alerts/alertCard.tsx b/src/components/alerts/alertCard.tsx deleted file mode 100644 index 41ee63657..000000000 --- a/src/components/alerts/alertCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { IconInfo, IconSuccess, IconWarning } from '../icons'; - -const styles = { - info: { - icon: , - color: 'text-info-800', - borderColor: 'border-info-400', - bgColor: 'bg-info-100', - }, - success: { - icon: , - color: 'text-success-800', - borderColor: 'border-success-400', - bgColor: 'bg-success-100', - }, - warning: { - icon: , - color: 'text-warning-800', - borderColor: 'border-warning-400', - bgColor: 'bg-warning-100', - }, - critical: { - icon: , - color: 'text-critical-800', - borderColor: 'border-critical-400', - bgColor: 'bg-critical-100', - }, -}; - -export type AlertCardProps = { - /** type and severity of alert */ - mode?: 'info' | 'success' | 'warning' | 'critical'; - /** card title */ - title: string; - /** card subtitle */ - helpText?: string; -}; - -export const AlertCard: React.FC = ({ mode = 'info', title, helpText }) => { - return ( - -
{styles[mode].icon}
- - {title} - {helpText} - - - ); -}; - -type ContainerProps = { - mode: NonNullable; -}; -const Container = styled.div.attrs(({ mode }) => ({ - className: `flex gap-1.5 box-border px-2 py-1.5 border-2 rounded-xl ${styles[mode].bgColor} ${styles[mode].borderColor}`, -}))``; - -const TextContainer = styled.div.attrs(() => ({ - className: 'flex flex-col gap-0.25 ', -}))``; - -const Title = styled.div.attrs(({ mode }) => ({ - className: `flex flex-col font-bold ft-text-base ${styles[mode].color}`, -}))``; - -const HelpText = styled.div.attrs(() => ({ - className: 'text-ui-600 ft-text-sm', -}))``; diff --git a/src/components/alerts/alertCard/alertCard.stories.tsx b/src/components/alerts/alertCard/alertCard.stories.tsx new file mode 100644 index 000000000..ce78be876 --- /dev/null +++ b/src/components/alerts/alertCard/alertCard.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { AlertCard } from './alertCard'; + +const meta: Meta = { + title: 'components/Alerts/AlertCard', + component: AlertCard, + tags: ['autodocs'], +}; + +type Story = StoryObj; + +/** + * Default usage example of AlertCard component. + */ +export const Default: Story = { + args: { + message: 'Alert message', + description: 'Alert description', + variant: 'info', + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=718-9005&mode=design&t=SszxFX4rPdpRifNQ-4', + }, + }, +}; + +export default meta; diff --git a/src/components/alerts/alertCard/alertCard.test.tsx b/src/components/alerts/alertCard/alertCard.test.tsx new file mode 100644 index 000000000..0b5bc8019 --- /dev/null +++ b/src/components/alerts/alertCard/alertCard.test.tsx @@ -0,0 +1,28 @@ +import { render, screen } from '@testing-library/react'; +import { AlertCard, type IAlertCardProps } from './alertCard'; + +describe('', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IAlertCardProps = { + variant: 'critical', + message: 'Message', + description: 'Description', + ...props, + }; + + return ; + }; + + it('renders an alert', () => { + render(createTestComponent()); + expect(screen.getByRole('alert')).toBeInTheDocument(); + }); + + it('renders message and description', () => { + const description = 'Alert Description'; + const message = 'Alert Message'; + render(createTestComponent({ description, message })); + expect(screen.getByText(description)).toBeVisible(); + expect(screen.getByText(message)).toBeVisible(); + }); +}); diff --git a/src/components/alerts/alertCard/alertCard.tsx b/src/components/alerts/alertCard/alertCard.tsx new file mode 100644 index 000000000..c725f42fc --- /dev/null +++ b/src/components/alerts/alertCard/alertCard.tsx @@ -0,0 +1,91 @@ +import classNames from 'classnames'; +import type React from 'react'; +import { type HTMLAttributes } from 'react'; + +import { Icon } from '../../icon'; +import { alertVariantToIconType, type AlertVariant } from '../utils'; + +export interface IAlertCardProps extends HTMLAttributes { + /** The main alert message. */ + message: string; + /** Optional description for the alert. */ + description?: string; + /** Specifies the variant of the alert. */ + variant: AlertVariant; +} + +// Maps alert variants to container class names. +const alertVariantToContainerClassNames: Record = { + critical: 'border-critical-400 bg-critical-100', + info: 'border-info-400 bg-info-100', + success: 'border-success-400 bg-success-100', + warning: 'border-warning-400 bg-warning-100', +}; + +// Maps alert variants to icon class names. +const alertVariantToIconClassNames: Record = { + critical: 'text-critical-500', + info: 'text-info-500', + success: 'text-success-500', + warning: 'text-warning-500', +}; + +// Maps alert variants to message class names. +const alertVariantToMessageClassNames: Record = { + critical: 'text-critical-800', + info: 'text-info-800', + success: 'text-success-800', + warning: 'text-warning-800', +}; + +// Maps alert variants to description class names. +const alertVariantToDescriptionClassNames: Record = { + critical: 'text-neutral-600', + info: 'text-neutral-600', + success: 'text-neutral-500', + warning: 'text-neutral-600', +}; + +/** + * AlertCard Component + * + * Displays an alert card with an icon, a main message, and an optional description. + * + * @param {IAlertCardProps} props - Component properties. + * @returns {React.ReactElement} Rendered AlertCard component. + */ +export const AlertCard: React.FC = ({ className, description, message, variant, ...rest }) => { + return ( +
+
+ +

+ {message} +

+
+ {description && ( +

+ {description} +

+ )} +
+ ); +}; diff --git a/src/components/alerts/alertCard/index.ts b/src/components/alerts/alertCard/index.ts new file mode 100644 index 000000000..cf890ccdb --- /dev/null +++ b/src/components/alerts/alertCard/index.ts @@ -0,0 +1 @@ +export { AlertCard, type IAlertCardProps } from './alertCard'; diff --git a/src/components/alerts/alertChip.stories.tsx b/src/components/alerts/alertChip.stories.tsx deleted file mode 100644 index c553aec55..000000000 --- a/src/components/alerts/alertChip.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconCheckmark } from '../icons'; -import { AlertChip, type AlertChipProps } from './alertChip'; - -export default { - title: 'Components/Alerts/Chip', - component: AlertChip, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - label: 'Pasted', - icon: , - showIcon: true, -}; diff --git a/src/components/alerts/alertChip.test.tsx b/src/components/alerts/alertChip.test.tsx deleted file mode 100644 index 06451f886..000000000 --- a/src/components/alerts/alertChip.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertChip } from './alertChip'; - -describe('AlertChip', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('alertChip'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertChip.tsx b/src/components/alerts/alertChip.tsx deleted file mode 100644 index a431bc7f9..000000000 --- a/src/components/alerts/alertChip.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import { css, styled } from 'styled-components'; - -import { IconCheckmark, type IconType } from '../icons'; - -export type AlertChipProps = { - /** Chip Label */ - label: string; - /** Icon component */ - icon?: ReactComponentElement; - /** control Icon visibility */ - showIcon?: boolean; - /** Is chip visible */ - isShown: boolean; -}; - -export const AlertChip: React.FC = ({ - label, - icon = , - showIcon = false, - isShown = false, -}) => { - return ( - - - {showIcon && - React.cloneElement(icon, { - height: 12, - width: 12, - className: 'text-ui-300', - })} - - - - ); -}; - -type ContainerProps = Pick; - -const WrapperAnimationCSS = css` - animation: ${({ isShown }) => (isShown ? 'fadein 0.3s' : 'fadeout 0.3s')}; - - @-webkit-keyframes fadein { - from { - top: 0; - opacity: 0; - z-index: 0; - } - to { - top: 24px; - opacity: 1; - z-index: 50; - } - } - - @keyframes fadein { - from { - top: 0; - opacity: 0; - z-index: 0; - } - to { - top: 24px; - opacity: 1; - z-index: 50; - } - } - - @-webkit-keyframes fadeout { - from { - top: 24px; - opacity: 1; - z-index: 50; - } - to { - top: 0; - opacity: 0; - z-index: 0; - } - } - - @keyframes fadeout { - from { - top: 24px; - opacity: 1; - z-index: 50; - } - to { - top: 0;s - opacity: 0; - z-index: 0; - } - } -`; - -const Wrapper = styled.div.attrs(({ isShown }) => ({ - className: `fixed w-full flex items-center justify-center top-3 ${ - isShown ? 'opacity-100 fixed' : 'opacity-0 none' - }`, -}))` - z-index: ${(props) => (props.isShown ? '50' : '-50')}; - ${WrapperAnimationCSS} -`; - -const BadgeContainer = styled.div.attrs(() => ({ - className: 'flex items-center bg-ui-900 rounded-full px-3 py-2 space-x-1 cursor-default', -}))``; - -const Label = styled.span.attrs({ - className: 'text-ui-100 ft-text-sm', -})``; diff --git a/src/components/alerts/alertInline.stories.tsx b/src/components/alerts/alertInline.stories.tsx deleted file mode 100644 index ecd1a574a..000000000 --- a/src/components/alerts/alertInline.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertInline, type AlertInlineProps } from './alertInline'; - -export default { - title: 'Components/Alerts/Inline', - component: AlertInline, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'critical', - label: 'Message text', -}; diff --git a/src/components/alerts/alertInline.test.tsx b/src/components/alerts/alertInline.test.tsx deleted file mode 100644 index c1232d206..000000000 --- a/src/components/alerts/alertInline.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertInline } from './alertInline'; - -describe('AlertInline', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('alertInline'); - } - - test('should render without crashing', () => { - const element = setup({ label: 'Test Message' }); - expect(element).toBeInTheDocument; - expect(screen.getByText(/test/i)).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertInline.tsx b/src/components/alerts/alertInline.tsx deleted file mode 100644 index 468abec27..000000000 --- a/src/components/alerts/alertInline.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { IconInfo, IconSuccess, IconWarning, type IconType } from '../icons'; - -export type AlertInlineProps = { - /** type and severity of alert */ - mode?: 'neutral' | 'success' | 'warning' | 'critical'; - - /** alert copy */ - label: string; - icon?: React.FunctionComponentElement; -}; - -const styles = { - neutral: { - icon: , - color: 'text-info-800', - }, - success: { - icon: , - color: 'text-success-800', - }, - warning: { - icon: , - color: 'text-warning-800', - }, - critical: { - icon: , - color: 'text-critical-800', - }, -}; - -/** - * Inline alert used in combination with form-fields - */ -export const AlertInline: React.FC = ({ mode = 'neutral', label, icon }) => { - return ( - -
{icon ?? styles[mode].icon}
- - - ); -}; - -type ContainerProps = { - mode: NonNullable; -}; -const Container = styled.div.attrs(({ mode }) => ({ - className: `flex items-center space-x-1 ${styles[mode].color}`, -}))``; - -const Label = styled.p.attrs({ className: 'font-bold ft-text-sm' })``; diff --git a/src/components/alerts/alertInline/alertInline.stories.tsx b/src/components/alerts/alertInline/alertInline.stories.tsx new file mode 100644 index 000000000..8ea237b93 --- /dev/null +++ b/src/components/alerts/alertInline/alertInline.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { AlertInline } from './alertInline'; + +const meta: Meta = { + title: 'components/Alerts/AlertInline', + component: AlertInline, + tags: ['autodocs'], +}; + +type Story = StoryObj; + +/** + * Default usage example of AlertInline component. + */ +export const Default: Story = { + args: { + message: 'Alert Message', + variant: 'success', + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=22-208&mode=design&t=SszxFX4rPdpRifNQ-4', + }, + }, +}; + +export default meta; diff --git a/src/components/alerts/alertInline/alertInline.test.tsx b/src/components/alerts/alertInline/alertInline.test.tsx new file mode 100644 index 000000000..17a58e8a9 --- /dev/null +++ b/src/components/alerts/alertInline/alertInline.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from '@testing-library/react'; +import { AlertInline, type IAlertInlineProps } from './alertInline'; + +describe('', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IAlertInlineProps = { + variant: 'critical', + message: 'Message', + ...props, + }; + + return ; + }; + + it('renders an alert', () => { + render(createTestComponent()); + expect(screen.getByRole('alert')).toBeInTheDocument(); + }); + + it('renders message and description', () => { + const message = 'Alert Message'; + render(createTestComponent({ message })); + expect(screen.getByText(message)).toBeVisible(); + }); +}); diff --git a/src/components/alerts/alertInline/alertInline.tsx b/src/components/alerts/alertInline/alertInline.tsx new file mode 100644 index 000000000..d035ce1cb --- /dev/null +++ b/src/components/alerts/alertInline/alertInline.tsx @@ -0,0 +1,50 @@ +import classNames from 'classnames'; +import type React from 'react'; +import { type HTMLAttributes } from 'react'; + +import { Icon } from '../../icon'; +import { alertVariantToIconType, type AlertVariant } from '../utils'; + +export interface IAlertInlineProps extends HTMLAttributes { + /** Alert text content. */ + message: string; + /** Defines the variant of the alert. */ + variant: AlertVariant; +} + +const variantToIconClassNames: Record = { + critical: 'text-critical-500', + info: 'text-info-500', + success: 'text-success-500', + warning: 'text-warning-500', +}; + +const variantToTextClassNames: Record = { + critical: 'text-critical-800', + info: 'text-info-800', + success: 'text-success-800', + warning: 'text-warning-800', +}; + +/** AlertInline UI Component */ +export const AlertInline: React.FC = (props) => { + const { className, message, variant, ...rest } = props; + return ( +
+ +

+ {message} +

+
+ ); +}; diff --git a/src/components/alerts/alertInline/index.ts b/src/components/alerts/alertInline/index.ts new file mode 100644 index 000000000..05f1ce8a5 --- /dev/null +++ b/src/components/alerts/alertInline/index.ts @@ -0,0 +1 @@ +export { AlertInline, type IAlertInlineProps } from './alertInline'; diff --git a/src/components/alerts/index.ts b/src/components/alerts/index.ts index b03d24eae..a76bc4cd1 100644 --- a/src/components/alerts/index.ts +++ b/src/components/alerts/index.ts @@ -1,4 +1,2 @@ -export * from './alertBanner'; export * from './alertCard'; -export * from './alertChip'; export * from './alertInline'; diff --git a/src/components/alerts/utils.ts b/src/components/alerts/utils.ts new file mode 100644 index 000000000..6ddb79b00 --- /dev/null +++ b/src/components/alerts/utils.ts @@ -0,0 +1,10 @@ +import { IconType } from '../icon'; + +export type AlertVariant = 'critical' | 'info' | 'success' | 'warning'; + +export const alertVariantToIconType: Record = { + critical: IconType.WARNING, + info: IconType.INFO, + success: IconType.RADIO_CHECK, + warning: IconType.WARNING, +}; diff --git a/src/components/avatar/avatar.stories.tsx b/src/components/avatar/avatar.stories.tsx deleted file mode 100644 index e3095ed3d..000000000 --- a/src/components/avatar/avatar.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { Avatar, type AvatarProps } from './avatar'; - -export default { - title: 'Components/Avatar', - component: Avatar, -} as Meta; - -const Template: Story = (args) => ; - -export const Square = Template.bind({}); -Square.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - mode: 'square', -}; - -export const Circle = Template.bind({}); -Circle.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - mode: 'circle', -}; - -export const Initials = Template.bind({}); -Initials.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', - mode: 'circle', -}; - -export const Identicon = Template.bind({}); -Identicon.args = { - src: '0x6720000000000000000000000000000000007739', - mode: 'circle', -}; diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx deleted file mode 100644 index 6956055f8..000000000 --- a/src/components/avatar/avatar.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { Avatar } from './avatar'; - -describe('Avatar', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByRole('img'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx deleted file mode 100644 index 649a605d9..000000000 --- a/src/components/avatar/avatar.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import Blockies from 'react-blockies'; -import { styled } from 'styled-components'; - -import { IsAddress } from '../../utils/addresses'; - -export type AvatarProps = { - /** Change Avatar's border Radius */ - mode?: 'circle' | 'square'; - /** Changes a Avatar's size */ - size: 'small' | 'default' | 'large'; - /** URL of the Avatar's src */ - src: string; -}; - -type SizesType = Record; - -const BLOCKIES_SQUARES = 8; -const sizes: SizesType = { - small: { sizes: 'w-3 h-3', scale: 3 }, - default: { sizes: 'w-5 h-5', scale: 5 }, - large: { sizes: 'w-6 h-6', scale: 6 }, -}; - -/** Simple Avatar*/ -export const Avatar: React.FC = ({ mode = 'circle', size = 'default', src }) => { - const [error, setError] = useState(false); - - useEffect(() => { - setError(false); - }, [src]); - - if (!error) { - return ( - - {IsAddress(src) || src?.endsWith('.eth') ? ( - - ) : ( - { - setError(true); - }} - /> - )} - - ); - } - - return ; -}; - -type StyledAvatarProps = Pick; -type StyledContainerProps = Pick; - -const StyledAvatar = styled.img.attrs(({ size }) => { - const className = `${sizes[size].sizes}`; - return { className }; -})``; - -const AvatarContainer = styled.div.attrs(({ size, mode }) => { - const className = `overflow-hidden bg-ui-100 - ${sizes[size].sizes} - ${mode === 'circle' ? 'rounded-full' : 'rounded-2xl'} - `; - return { className }; -})``; - -const FallbackAvatar = styled.div.attrs({ className: 'w-3 h-3 rounded-full bg-gradient-to-tl from-ui-900' })``; diff --git a/src/components/avatar/avatarDao.stories.tsx b/src/components/avatar/avatarDao.stories.tsx deleted file mode 100644 index 1f1049d27..000000000 --- a/src/components/avatar/avatarDao.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// TODO: combine all avatar stories -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarDao, type AvatarDaoProps } from './avatarDao'; - -export default { - title: 'Components/Avatar/Dao', - component: AvatarDao, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - daoName: 'DAO Name', -}; - -export const NoIcon = Template.bind({}); -NoIcon.args = { - daoName: 'DAO Abc', -}; diff --git a/src/components/avatar/avatarDao.tsx b/src/components/avatar/avatarDao.tsx deleted file mode 100644 index ee17e0307..000000000 --- a/src/components/avatar/avatarDao.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useMemo, useState, type HTMLAttributes } from 'react'; -import { styled } from 'styled-components'; - -export interface AvatarDaoProps extends HTMLAttributes { - daoName: string; - src?: string; - size?: 'small' | 'medium' | 'big' | 'hero' | 'unset'; - onClick?: () => void; -} - -export const AvatarDao: React.FC = ({ daoName, src, size = 'medium', onClick, ...props }) => { - const [error, setError] = useState(false); - - useEffect(() => { - setError(false); - }, [src]); - - const daoInitials = useMemo(() => { - // To allow for no name daos - should not be a thing - if (!daoName) { - return ''; - } - - const arr = daoName.trim().split(' '); - if (arr.length === 1) { - return arr[0][0]; - } else { - return arr[0][0] + arr[1][0]; - } - }, [daoName]); - - return error || !src ? ( - - {daoInitials?.toUpperCase()} - - ) : ( - setError(true)} {...props} /> - ); -}; - -type AvatarPropsType = { - size: NonNullable; -}; - -const sizes = { - small: 'w-3 h-3 ft-text-xs', - medium: 'w-6 h-6 ft-text-base', - big: 'w-10 h-10 ft-text-lg', - hero: 'w-14 h-14 ft-text-xl', -}; - -const Avatar = styled.img.attrs(({ size }) => ({ - className: `${size !== 'unset' && sizes[size]} rounded-full` as string, -}))``; - -const FallBackAvatar = styled.div.attrs(({ size }) => ({ - className: - 'flex items-center justify-center font-bold text-ui-0 bg-gradient-to-r' + - ` from-primary-500 to-primary-800 ${size !== 'unset' && sizes[size]} rounded-full border`, -}))``; - -const DaoInitials = styled.p.attrs({ - className: 'w-4 h-4 flex items-center justify-center', -})``; diff --git a/src/components/avatar/avatarToken.stories.tsx b/src/components/avatar/avatarToken.stories.tsx deleted file mode 100644 index 7a9e325d6..000000000 --- a/src/components/avatar/avatarToken.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarToken, type AvatarTokenProps } from './avatarToken'; - -export default { - title: 'Components/Avatar/Token', - component: AvatarToken, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', - size: 'small', -}; - -export const WithFallback = Template.bind({}); -WithFallback.args = {}; diff --git a/src/components/avatar/avatarToken.tsx b/src/components/avatar/avatarToken.tsx deleted file mode 100644 index d790bf426..000000000 --- a/src/components/avatar/avatarToken.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { type SyntheticEvent } from 'react'; -import { styled } from 'styled-components'; -import FallbackImg from '../../assets/avatar-token.svg'; - -export type AvatarTokenProps = { - size?: 'small' | 'medium' | 'large'; - src?: string; -}; - -export const AvatarToken: React.FC = ({ size = 'medium', src }) => { - return ( - ) => { - e.currentTarget.src = FallbackImg; - }} - /> - ); -}; - -const styles = { - small: 'w-2 h-2', - medium: 'w-3 h-3', - large: 'w-5 h-5', -}; - -type StyledImageProps = { size: AvatarTokenProps['size'] }; - -const StyledImage = styled.img.attrs(({ size = 'medium' }) => { - return { className: `${styles[size]} rounded-full` }; -})``; diff --git a/src/components/avatar/avatarWallet.stories.tsx b/src/components/avatar/avatarWallet.stories.tsx deleted file mode 100644 index f02c6fe48..000000000 --- a/src/components/avatar/avatarWallet.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarWallet, type AvatarWalletProps } from './avatarWallet'; - -export default { - title: 'Components/Avatar/Wallet', - component: AvatarWallet, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', -}; - -export const WithAddress = Template.bind({}); -WithAddress.args = { - src: '0x6720000000000000000000000000000000007739', -}; diff --git a/src/components/avatar/avatarWallet.tsx b/src/components/avatar/avatarWallet.tsx deleted file mode 100644 index 945e8a8bb..000000000 --- a/src/components/avatar/avatarWallet.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import Blockies from 'react-blockies'; -import { styled } from 'styled-components'; -import { IsAddress } from '../../utils/addresses'; - -const SQUARES = 8; - -export type AvatarWalletProps = { - size?: 'small' | 'medium'; - /** - * Url of the avatar icon OR wallet address - */ - src: string; -}; - -type SizesType = Record, { style: string; scale: number }>; - -const styles: SizesType = { - small: { style: 'w-2 h-2', scale: 2 }, - medium: { style: 'w-3 h-3', scale: 3 }, -}; - -export const AvatarWallet: React.FC = ({ src, size = 'medium' }) => { - return IsAddress(src) ? ( - - ) : ( - - ); -}; - -const StyledBlockies = styled(Blockies).attrs({ - className: 'rounded-full', -})``; - -type SizeProps = { size: AvatarWalletProps['size'] }; -const StyledAvatar = styled.img.attrs(({ size = 'medium' }) => { - return { - className: `${styles[size].style} rounded-full`, - }; -})``; diff --git a/src/components/avatar/index.ts b/src/components/avatar/index.ts deleted file mode 100644 index ccda4b78a..000000000 --- a/src/components/avatar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './avatar'; -export * from './avatarDao'; -export * from './avatarToken'; -export * from './avatarWallet'; diff --git a/src/components/avatars/avatarIcon/avatarIcon.stories.ts b/src/components/avatars/avatarIcon/avatarIcon.stories.ts new file mode 100644 index 000000000..74dae1d5a --- /dev/null +++ b/src/components/avatars/avatarIcon/avatarIcon.stories.ts @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { IconType } from '../../icon'; +import { AvatarIcon } from './avatarIcon'; + +const meta: Meta = { + title: 'components/Avatars/AvatarIcon', + component: AvatarIcon, + tags: ['autodocs'], +}; + +type Story = StoryObj; + +/** + * Default usage example of AvatarIcon component. + */ +export const Default: Story = { + args: { + size: 'md', + variant: 'info', + icon: IconType.APP_GOVERNANCE, + responsiveSize: { lg: 'sm' }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=7853-14315&mode=dev', + }, + }, +}; + +export default meta; diff --git a/src/components/avatars/avatarIcon/avatarIcon.tsx b/src/components/avatars/avatarIcon/avatarIcon.tsx new file mode 100644 index 000000000..23b63cc4a --- /dev/null +++ b/src/components/avatars/avatarIcon/avatarIcon.tsx @@ -0,0 +1,72 @@ +import classNames from 'classnames'; +import type React from 'react'; + +import { type HTMLAttributes } from 'react'; +import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../../../types'; +import { responsiveUtils } from '../../../utils'; +import { Icon, type IconType } from '../../icon'; + +type AvatarIconSize = 'sm' | 'md' | 'lg'; +type AvatarIconVariant = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical'; + +export interface IAvatarIconProps extends HTMLAttributes { + size?: AvatarIconSize; + variant?: AvatarIconVariant; + responsiveSize?: ResponsiveAttribute; + icon: IconType; +} + +const avatarVariantToIconClassNames: Record = { + neutral: 'text-neutral-400', + primary: 'text-primary-400', + critical: 'text-critical-600', + info: 'text-info-600', + success: 'text-success-600', + warning: 'text-warning-600', +}; + +const avatarVariantToContainerClassNames: Record = { + neutral: 'bg-neutral-50', + primary: 'bg-primary-50', + critical: 'bg-critical-100', + info: 'bg-info-100', + success: 'bg-success-100', + warning: 'bg-warning-100', +}; + +const responsiveSizeClasses: ResponsiveAttributeClassMap = { + sm: { + sm: 'w-6 h-6', + md: 'md:w-6 md:h-6', + lg: 'lg:w-6 lg:h-6', + }, + md: { + sm: 'w-8 h-8', + md: 'md:w-8 md:h-8', + lg: 'lg:w-8 lg:h-8', + }, + lg: { + sm: 'w-10 h-10', + md: 'md:w-10 md:h-10', + lg: 'lg:w-10 lg:h-10', + }, +}; + +export const AvatarIcon: React.FC = (props) => { + const { className, icon, variant = 'neutral', size = 'sm', responsiveSize = {}, ...rest } = props; + + const containerClasses = classNames( + 'flex items-center justify-center rounded-full', + avatarVariantToContainerClassNames[variant], + responsiveUtils.generateClassNames(size, responsiveSize, responsiveSizeClasses), + className, + ); + + const iconClasses = classNames(avatarVariantToIconClassNames[variant]); + + return ( +
+ +
+ ); +}; diff --git a/src/components/avatars/avatarIcon/index.ts b/src/components/avatars/avatarIcon/index.ts new file mode 100644 index 000000000..ae122de8f --- /dev/null +++ b/src/components/avatars/avatarIcon/index.ts @@ -0,0 +1 @@ +export * from './avatarIcon'; diff --git a/src/components/avatars/index.ts b/src/components/avatars/index.ts new file mode 100644 index 000000000..ae122de8f --- /dev/null +++ b/src/components/avatars/index.ts @@ -0,0 +1 @@ +export * from './avatarIcon'; diff --git a/src/components/backdrop/backdrop.test.tsx b/src/components/backdrop/backdrop.test.tsx deleted file mode 100644 index 24bc7d033..000000000 --- a/src/components/backdrop/backdrop.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { Backdrop } from './backdrop'; - -describe('Backdrop', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('backdrop-container'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/backdrop/backdrop.tsx b/src/components/backdrop/backdrop.tsx deleted file mode 100644 index 7f4fdddbc..000000000 --- a/src/components/backdrop/backdrop.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useEffect, type ReactNode } from 'react'; -import { styled, type CSSProperties } from 'styled-components'; - -export interface BackdropProps { - /** - * The `visible` prop determines whether your modal is visible. - */ - visible?: boolean; - /** - * The `onClose` prop allows passing a function that will be called once the modal has been dismissed. - */ - onClose?: () => void; - /** - * Children Element - */ - children?: ReactNode; -} - -const togglePageOverflow = (visible: boolean) => { - const html = document.querySelector('html'); - - if (!html) { - return; - } - - html.style.overflow = visible ? 'hidden' : 'auto'; -}; - -/** - * Backdrop UI component - */ -export const Backdrop: React.FC = ({ visible = false, children, onClose, ...props }) => { - useEffect(() => { - togglePageOverflow(visible); - }, [visible]); - - useEffect(() => { - const handleResize = () => togglePageOverflow(visible); - - window?.addEventListener?.('resize', handleResize); - - return () => { - window?.removeEventListener?.('resize', handleResize); - }; - }, [visible]); - - return ( - - {children} - - ); -}; - -type StyledBackdropProps = { - visible: boolean; -}; - -export const BackdropStyles = ({ visible }: StyledBackdropProps) => { - const className: string = visible ? 'visible opacity-100 z-20' : 'invisible opacity-0'; - const css: CSSProperties = { - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - background: 'linear-gradient(167.96deg, rgba(31, 41, 51, 0.24) 0%, #1F2933 100%)', - transition: 'visibility 0.2s, opacity 0.2s linear', - backdropFilter: 'blur(24px)', - cursor: 'pointer', - marginTop: 0, - }; - - return { className, css }; -}; - -const StyledBackdrop = styled.div.attrs(({ visible }) => { - const { className, css } = BackdropStyles({ visible }); - return { className, style: css }; -})``; diff --git a/src/components/backdrop/index.ts b/src/components/backdrop/index.ts deleted file mode 100644 index 349647233..000000000 --- a/src/components/backdrop/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './backdrop'; diff --git a/src/components/breadcrumb/breadcrumb.test.tsx b/src/components/breadcrumb/breadcrumb.test.tsx deleted file mode 100644 index c25a37b3b..000000000 --- a/src/components/breadcrumb/breadcrumb.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { IconAdd } from '../icons'; -import { Breadcrumb } from './breadcrumb'; - -const crumbs = [ - { label: 'label-1', path: 'path-1' }, - { label: 'label-2', path: 'path-2' }, -]; - -describe('Breadcrumb', () => { - test('should render default crumbs without crashing', () => { - render(} />); - - const element = screen.getByTestId(/breadcrumbs/i); - expect(element).toBeInTheDocument; - }); - - test('should render process crumb without crashing', () => { - render(); - - const element = screen.getByTestId(/breadcrumbs/i); - expect(element).toBeInTheDocument; - }); - - test('should display the breadcrumbs with given labels', () => { - render(} />); - const breadcrumbs = screen.getAllByRole('button'); - - breadcrumbs.forEach((crumb, index) => expect(crumb.textContent).toBe(crumbs[index].label)); - }); - - test('should call the onClick method with the correct path when breadcrumb is clicked', () => { - const mockHandler = jest.fn(); - - render(} />); - fireEvent.click(screen.getAllByRole('button')[0]); - - expect(mockHandler).toHaveBeenCalledTimes(1); - expect(mockHandler).toBeCalledWith(crumbs[0].path); - }); - - test('should not call the onClick method when last breadcrumb is clicked', () => { - const mockHandler = jest.fn(); - - render(} />); - const breadcrumbs = screen.getAllByRole('button'); - fireEvent.click(breadcrumbs[breadcrumbs.length - 1]); - - expect(mockHandler).not.toHaveBeenCalled(); - }); -}); diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx deleted file mode 100644 index e65c871d0..000000000 --- a/src/components/breadcrumb/breadcrumb.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import { styled } from 'styled-components'; -import { ButtonIcon } from '../button'; -import { IconChevronLeft, IconChevronRight, type IconType } from '../icons'; -import { type TagProps } from '../tag'; -import Crumb from './crumb'; - -export type CrumbType = { - label: string; - path: string; -}; - -export type DefaultCrumbProps = { - /** - * Array of breadcrumbs to be displayed; each breadcrumb should - * include a label and its corresponding path - */ - crumbs: CrumbType[]; - - /** Base path icon to be displayed */ - icon: ReactComponentElement; -}; - -export type ProcessCrumbProps = { - crumbs: CrumbType; - icon?: ReactComponentElement; -}; - -export type BreadcrumbProps = { - /** Tag shown at the end of the list of breadcrumbs */ - tag?: React.FunctionComponentElement; - - /** Callback returning the path value of the breadcrumb clicked */ - onClick?: (path: string) => void; -} & (ProcessCrumbProps | DefaultCrumbProps); - -/** Component displaying given list as breadcrumbs. */ -export const Breadcrumb: React.FC = ({ crumbs, icon, tag, onClick }) => { - if (Array.isArray(crumbs)) { - let isLast: boolean; - - return ( - - {crumbs.map(({ label, path }, index) => { - isLast = index === crumbs.length - 1; - return ( -
- onClick?.(path) })} - /> - {!isLast && } -
- ); - })} - - ); - } else { - return ( - - - } - onClick={() => onClick?.(crumbs.path)} - bgWhite - /> -

{crumbs?.label}

- {tag} - - - ); - } -}; - -const Container = styled.div.attrs({ - className: - 'inline-flex items-center py-0.5 desktop:px-2 space-x-1 ' + - 'desktop:space-x-1.5 h-5 desktop:h-6 desktop:bg-ui-0 desktop:rounded-xl', -})``; - -const ProcessContainer = styled.div.attrs({ - className: 'inline-flex py-0.5 desktop:pr-2 desktop:pl-0.5 desktop:rounded-xl desktop:bg-ui-0 h-6', -})``; - -const ProcessCrumbContainer = styled.div.attrs({ - className: 'flex items-center space-x-1.5 font-bold text-ui-600', -})``; diff --git a/src/components/breadcrumb/breadcrumbs.stories.tsx b/src/components/breadcrumb/breadcrumbs.stories.tsx deleted file mode 100644 index eed6f5e20..000000000 --- a/src/components/breadcrumb/breadcrumbs.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { type Meta, type StoryFn } from '@storybook/react'; -import React from 'react'; -import { IconFinance } from '../icons'; -import { Tag } from '../tag'; -import { Breadcrumb, type BreadcrumbProps } from './breadcrumb'; - -export default { - title: 'Components/Breadcrumb', - component: Breadcrumb, -} as Meta; - -const Template: StoryFn = (args: BreadcrumbProps) => ; - -export const Default = Template.bind({}); -export const NoTag = Template.bind({}); -export const Process = Template.bind({}); - -Default.args = { - crumbs: [ - { label: 'Finance', path: '/abc' }, - { label: 'Tokens', path: '/abc' }, - { label: 'Third Level', path: '/abc' }, - ], - tag: , - icon: , -}; - -NoTag.args = { - crumbs: [ - { label: 'Finance', path: '/abc' }, - { label: 'Tokens', path: '/abc' }, - ], - icon: , -}; - -Process.args = { - crumbs: [{ label: 'New Proposal', path: '/abc' }], - tag: , -}; diff --git a/src/components/breadcrumb/crumb.tsx b/src/components/breadcrumb/crumb.tsx deleted file mode 100644 index b19ffa880..000000000 --- a/src/components/breadcrumb/crumb.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import { styled } from 'styled-components'; -import { type IconType } from '../icons'; -import { type TagProps } from '../tag'; - -type CrumbProps = { - first?: boolean; - label: string; - last?: boolean; - icon?: ReactComponentElement; - tag?: React.FunctionComponentElement; - onClick?: React.MouseEventHandler; -}; - -const Crumb: React.FC = (props) => { - return ( - - {props.first && - props.icon && - React.cloneElement(props.icon, { - className: 'desktop:w-2.5 desktop:h-2.5', - })} -

{props.label}

- {props.last && props.tag} - - ); -}; - -export default Crumb; - -const CrumbContainer = styled.button.attrs({ - className: 'flex items-center space-x-1 desktop:space-x-1.5' as string, -})``; diff --git a/src/components/breadcrumb/index.ts b/src/components/breadcrumb/index.ts deleted file mode 100644 index e10b05199..000000000 --- a/src/components/breadcrumb/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './breadcrumb'; diff --git a/src/components/button/button.api.ts b/src/components/button/button.api.ts new file mode 100644 index 000000000..3207e9ebd --- /dev/null +++ b/src/components/button/button.api.ts @@ -0,0 +1,32 @@ +import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'; +import type { IconType } from '../icon'; + +export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'critical'; +export type ButtonSize = 'lg' | 'md' | 'sm'; +export type ButtonState = 'disabled' | 'loading'; + +export interface IButtonBaseProps { + /** + * Variant of the button. + */ + variant: ButtonVariant; + /** + * Size of the button. + */ + size: ButtonSize; + /** + * State of the button. + */ + state?: ButtonState; + /** + * Icon displayed on the right side of the button. + */ + iconRight?: IconType; + /** + * Icon displayed on the left side of the button. + */ + iconLeft?: IconType; +} + +export type IButtonProps = IButtonBaseProps & + (ButtonHTMLAttributes | AnchorHTMLAttributes); diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx new file mode 100644 index 000000000..842faf2f2 --- /dev/null +++ b/src/components/button/button.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './button'; + +const meta: Meta = { + title: 'components/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + href: { control: 'text' }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=7980-15610&mode=design&t=GaPykW52ajbQx2r7-4', + }, + }, +}; + +type Story = StoryObj; + +/** + * Default usage example of the Button component. + */ +export const Default: Story = { + args: { + variant: 'primary', + size: 'lg', + children: 'Button label', + onClick: () => alert('click'), + }, +}; + +/** + * Usage example of the Button component as Link. + */ +export const Link: Story = { + args: { + variant: 'primary', + size: 'lg', + children: 'Link label', + onClick: () => alert('click'), + href: 'https://www.google.com', + target: '_blank', + }, +}; + +export default meta; diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx index b38797d43..cf79ae9cb 100644 --- a/src/components/button/button.test.tsx +++ b/src/components/button/button.test.tsx @@ -1,24 +1,99 @@ import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { ButtonBase as Button } from './buttonBase'; +import { IconType } from '../icon'; +import { Button } from './button'; +import type { IButtonProps } from './button.api'; -describe('Button', () => { - // eslint-disable-next-line - function setup(args: any) { - render( + ); +}; diff --git a/src/components/button/buttonBase.stories.tsx b/src/components/button/buttonBase.stories.tsx deleted file mode 100644 index 05c4f6c24..000000000 --- a/src/components/button/buttonBase.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// TODO: remove story when publishing storybook -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconAdd } from '../icons'; -import { ButtonBase, type ButtonBaseProps } from './buttonBase'; - -export default { - title: 'Components/Buttons/Base', - component: ButtonBase, -} as Meta; - -const Template: Story = (args) => ; - -export const ButtonText = Template.bind({}); -ButtonText.args = { - label: 'Button Text', - disabled: false, -}; - -export const ButtonIcon = Template.bind({}); -ButtonIcon.args = { - label: 'Button Text', - disabled: true, - iconRight: , -}; diff --git a/src/components/button/buttonBase.tsx b/src/components/button/buttonBase.tsx deleted file mode 100644 index b3c8a21f1..000000000 --- a/src/components/button/buttonBase.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React, { type ButtonHTMLAttributes, type CSSProperties } from 'react'; -import { styled } from 'styled-components'; - -import { type IconType } from '../icons'; - -export type ButtonBaseProps = ButtonHTMLAttributes & { - iconOnly?: boolean; // Guard against passing label to ButtonIcon - iconLeft?: React.FunctionComponentElement; - iconRight?: React.FunctionComponentElement; - label?: string; - mode?: 'primary' | 'secondary' | 'ghost'; - size?: 'small' | 'medium' | 'large'; -}; - -/** - * Button to be used as base for other button components. - * This button should not be exported with the library. - * Height, font, focus, and border-radius are included. - * - * Note: Even if both iconRight and iconLeft are passed, - * ONLY the iconLeft will be shown. - */ -export const ButtonBase = React.forwardRef( - ({ iconRight, iconLeft, iconOnly = false, size = 'medium', label, ...props }, ref) => { - return ( - - {iconLeft && {iconLeft}} - {!iconOnly && } - {!iconLeft && iconRight && {iconRight}} - - ); - }, -); - -ButtonBase.displayName = 'ButtonBase'; - -/********************************** - * STYLES * - **********************************/ -const sizeClassNames = { - small: 'h-4 space-x-1 rounded-lg', - medium: 'h-5 space-x-1.5 rounded-larger', - large: 'h-6 space-x-1.5 rounded-xl', -}; - -const sizeStyles = { - small: { minWidth: '32px' }, - medium: { minWidth: '40px' }, - large: { minWidth: '48px' }, -}; - -const fontStyles = { - small: 'ft-text-sm', - medium: 'ft-text-base', - large: 'ft-text-base', -}; - -const iconStyles = { - small: 'w-1.5 h-1.5', - medium: 'w-2 h-2', - large: 'w-2 h-2', -}; - -/********************************** - * Styled-Components * - **********************************/ -type SizeProps = { - size: ButtonBaseProps['size']; -}; - -const BaseStyledButton = styled.button.attrs(({ size = 'medium' }) => { - const className = `${sizeClassNames[size]} ${fontStyles[size]} - flex justify-center items-center focus:outline-none focus-visible:ring-2 - focus-visible:ring-primary-500`; - - const style = sizeStyles[size] as CSSProperties; - - return { className, style }; -})``; - -type LabelProps = { - visible: boolean; -}; - -const Label = styled.span.attrs(({ visible }) => { - let className = 'font-bold'; - if (!visible) { - className += ' hidden'; - } - return { className }; -})``; - -const IconContainer = styled.span.attrs(({ size = 'medium' }) => { - const className = `flex items-center ${iconStyles[size]}`; - return { className }; -})``; diff --git a/src/components/button/buttonGroup/button.tsx b/src/components/button/buttonGroup/button.tsx deleted file mode 100644 index 2bc7fbcf7..000000000 --- a/src/components/button/buttonGroup/button.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { ButtonText } from '../buttonText'; -import { useButtonGroupContext } from './buttonGroup'; - -export type OptionProps = { - value: string; - label: string; - disabled?: boolean; -}; - -export const Option: React.FC = ({ value, label, disabled = false }) => { - const { bgWhite, selectedValue, onChange } = useButtonGroupContext(); - - return ( - onChange?.(value)} - /> - ); -}; diff --git a/src/components/button/buttonGroup/buttonGroup.stories.tsx b/src/components/button/buttonGroup/buttonGroup.stories.tsx deleted file mode 100644 index 957efaf5b..000000000 --- a/src/components/button/buttonGroup/buttonGroup.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { Option } from './button'; -import { ButtonGroup, type ButtonGroupProps } from './buttonGroup'; - -export default { - title: 'Components/Buttons/Group', - component: ButtonGroup, -} as Meta; - -const Template: Story = (args) => ( - - -); - -export const Default = Template.bind({}); -Default.args = { - bgWhite: true, - defaultValue: 'Max', - onChange: (value) => alert(value), -}; diff --git a/src/components/button/buttonGroup/buttonGroup.test.tsx b/src/components/button/buttonGroup/buttonGroup.test.tsx deleted file mode 100644 index f07dabee9..000000000 --- a/src/components/button/buttonGroup/buttonGroup.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { Option } from './button'; -import { ButtonGroup } from './buttonGroup'; - -describe('Button Group', () => { - // eslint-disable-next-line - function setup(args: any) { - render( - - , - ); - return screen.getByTestId('buttonGroup'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/button/buttonGroup/buttonGroup.tsx b/src/components/button/buttonGroup/buttonGroup.tsx deleted file mode 100644 index 4bceae0d7..000000000 --- a/src/components/button/buttonGroup/buttonGroup.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react'; -import { styled } from 'styled-components'; - -import { type OptionProps } from './button'; - -type ButtonContextType = { - bgWhite: boolean; - selectedValue: string; - onChange: (value: string) => void; -}; - -export const ButtonGroupContext = createContext(undefined); - -export const useButtonGroupContext = () => useContext(ButtonGroupContext) as ButtonContextType; - -type ButtonProviderProps = { - value?: string; - defaultValue?: string; - bgWhite: boolean; - onChange?: (value: string) => void; - children: ReactNode; -}; - -const ButtonProvider: React.FC = ({ - value, - bgWhite, - defaultValue, - onChange: onChangeCallback, - children, -}) => { - const isControlled = typeof value !== 'undefined'; - const [internalValue, setInternalValue] = useState(defaultValue ?? ''); - - const onChange = useCallback( - (nextValue: string) => { - onChangeCallback?.(nextValue); - - if (!isControlled) { - setInternalValue(nextValue); - } - }, - [isControlled, onChangeCallback], - ); - - const contextValues = useMemo( - () => ({ - bgWhite, - selectedValue: isControlled ? (value as string) : internalValue, - onChange, - }), - [bgWhite, internalValue, isControlled, onChange, value], - ); - - return {children}; -}; - -export type ButtonGroupProps = { - value?: string; - bgWhite: boolean; - defaultValue: string; - onChange?: (value: string) => void; - children: Array>; -}; - -export const ButtonGroup: React.FC = ({ value, bgWhite, defaultValue, onChange, children }) => { - return ( - - - {children} - - - ); -}; - -type HStackProps = { - bgWhite: boolean; -}; - -const HStack = styled.div.attrs(({ bgWhite }) => ({ - className: `flex rounded-xl p-0.5 space-x-1.5 - ${bgWhite ? 'bg-ui-50' : 'bg-ui-0'} - `, -}))``; diff --git a/src/components/button/buttonGroup/index.ts b/src/components/button/buttonGroup/index.ts deleted file mode 100644 index 80328476c..000000000 --- a/src/components/button/buttonGroup/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './button'; -export * from './buttonGroup'; diff --git a/src/components/button/buttonIcon.stories.tsx b/src/components/button/buttonIcon.stories.tsx deleted file mode 100644 index a72e5dace..000000000 --- a/src/components/button/buttonIcon.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconAdd } from '../icons'; -import { ButtonIcon, type ButtonIconProps } from './buttonIcon'; - -export default { - title: 'Components/Buttons/Icon', - component: ButtonIcon, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - icon: , - children: 'abc', - onClick: () => alert('clicked'), -}; diff --git a/src/components/button/buttonIcon.tsx b/src/components/button/buttonIcon.tsx deleted file mode 100644 index f7fb46906..000000000 --- a/src/components/button/buttonIcon.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import type { IconType } from '../icons'; -import type { ButtonBaseProps } from './buttonBase'; -import { ButtonBase } from './buttonBase'; - -export type ButtonIconProps = Omit & { - bgWhite?: boolean; - icon: React.FunctionComponentElement; - isActive?: boolean; -}; - -export const ButtonIcon = React.forwardRef( - ({ bgWhite = false, icon, isActive = false, mode = 'primary', size = 'medium', ...props }, ref) => { - return ( - - ); - }, -); - -ButtonIcon.displayName = 'ButtonIcon'; - -const paddingStyles = { - small: 'w-4 p-1', - medium: 'w-5 p-1.5', - large: 'w-6 p-2', -}; - -type StyledButtonProps = { - bgWhite: boolean; - isActive: boolean; - mode: ButtonBaseProps['mode']; - size: ButtonBaseProps['size']; -}; - -const StyledButton = styled(ButtonBase).attrs(({ bgWhite, isActive, mode, size = 'medium' }) => { - let className: string | undefined; - - switch (mode) { - case 'secondary': - className = `${bgWhite ? 'bg-ui-50 disabled:bg-ui-50' : 'bg-ui-0 disabled:bg-ui-100'} ${ - isActive ? 'text-ui-800 bg-ui-200' : 'text-ui-600' - } ${ - paddingStyles[size] - } hover:text-ui-800 hover:bg-ui-100 active:text-ui-800 active:bg-ui-200 disabled:text-ui-300`; - break; - - case 'ghost': - className = `${ - bgWhite - ? `${isActive ? 'bg-primary-50' : 'bg-ui-0'} active:bg-primary-50` - : `${isActive ? 'bg-ui-0' : 'bg-transparent'} active:bg-ui-0` - } ${isActive ? 'ext-primary-500' : 'text-ui-500'} ${ - paddingStyles[size] - } focus:text-primary-400 hover:text-primary-500 active:text-primary-500 disabled:text-ui-300 disabled:bg-transparent`; - break; - - default: - className = `${isActive ? 'bg-primary-700' : 'bg-primary-400'} ${ - paddingStyles[size] - } text-ui-0 hover:bg-primary-500 active:bg-primary-700 disabled:text-primary-300 disabled:bg-primary-100`; - break; - } - - return { className }; -})``; diff --git a/src/components/button/buttonText.stories.tsx b/src/components/button/buttonText.stories.tsx deleted file mode 100644 index 731fef3d4..000000000 --- a/src/components/button/buttonText.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconAdd } from '../icons'; -import { ButtonText, type ButtonTextProps } from './buttonText'; - -export default { - title: 'Components/Buttons/Text', - component: ButtonText, -} as Meta; - -const Template: Story = (args) => ; - -export const Label = Template.bind({}); -Label.args = { - label: 'Button with label', - onClick: () => alert('clicked'), - disabled: false, -}; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - label: 'Button Text', - disabled: true, - iconLeft: , - iconRight: , -}; diff --git a/src/components/button/buttonText.tsx b/src/components/button/buttonText.tsx deleted file mode 100644 index 867e259c8..000000000 --- a/src/components/button/buttonText.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import type { ButtonBaseProps } from './buttonBase'; -import { ButtonBase } from './buttonBase'; - -// Omit label to make it required -export type ButtonTextProps = Omit & { - bgWhite?: boolean; - label: string; - isActive?: boolean; - className?: string; -}; - -export const ButtonText = React.forwardRef( - ({ bgWhite = false, label, isActive = false, mode = 'primary', size = 'medium', className, ...props }, ref) => { - return ( - - ); - }, -); - -ButtonText.displayName = 'ButtonText'; - -const paddingStyles = { - small: 'py-0.5 px-2', - medium: 'py-1.5 px-2', - large: 'py-1.5 px-2', -}; - -type StyledButtonProps = { - bgWhite: boolean; - isActive: boolean; - mode: ButtonBaseProps['mode']; - size: ButtonBaseProps['size']; - inputClassName?: string; -}; -const StyledButton = styled(ButtonBase).attrs( - ({ bgWhite, isActive, mode, size = 'medium', inputClassName }) => { - let className: string | undefined; - - switch (mode) { - case 'secondary': - className = `${bgWhite ? 'bg-ui-50' : 'bg-ui-0'} ${ - isActive ? 'text-ui-800 bg-ui-200' : 'text-ui-600' - } ${ - paddingStyles[size] - } hover:text-ui-800 hover:bg-ui-100 active:text-ui-800 active:bg-ui-200 disabled:text-ui-300 disabled:bg-ui-100`; - break; - - case 'ghost': - className = `${ - bgWhite - ? `${isActive ? 'bg-primary-50' : 'bg-ui-0'} active:bg-primary-50` - : `${isActive ? 'bg-ui-0' : 'bg-transparent'} active:bg-ui-0` - } ${isActive ? 'text-primary-500' : 'text-ui-600'} ${ - paddingStyles[size] - } hover:text-primary-500 active:text-primary-500 disabled:text-ui-300 disabled:bg-transparent`; - break; - - default: - className = `${isActive ? 'bg-primary-700' : 'bg-primary-400'} ${ - paddingStyles[size] - } text-ui-0 hover:bg-primary-500 active:bg-primary-700 disabled:text-primary-300 disabled:bg-primary-100`; - } - - return { className: `${className} ${inputClassName}` }; - }, -)``; diff --git a/src/components/button/buttonWallet.stories.tsx b/src/components/button/buttonWallet.stories.tsx deleted file mode 100644 index fe998619d..000000000 --- a/src/components/button/buttonWallet.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { ButtonWallet, type ButtonWalletProps } from './buttonWallet'; - -export default { - title: 'Components/Buttons/Wallet', - component: ButtonWallet, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - disabled: true, - label: '0x6720000000000000000000000000000000007739', - isConnected: true, - src: '0x6720000000000000000000000000000000007739', -}; - -export const NotConnected = Template.bind({}); -NotConnected.args = { - label: 'Login', - isConnected: false, - src: '0x6720000000000000000000000000000000007739', -}; diff --git a/src/components/button/buttonWallet.tsx b/src/components/button/buttonWallet.tsx deleted file mode 100644 index 5e243abce..000000000 --- a/src/components/button/buttonWallet.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { type ButtonHTMLAttributes, type FC } from 'react'; -import { styled } from 'styled-components'; - -import { shortenAddress } from '../../utils/addresses'; -import { AvatarWallet } from '../avatar'; -import { IconPerson } from '../icons'; -import { Spinner } from '../spinner'; - -export type ButtonWalletProps = ButtonHTMLAttributes & { - /** - * set wallet Address/Ens - */ - label: string | null; - /** - * Avatar Image source - */ - src: string | null; - /** - * Loading mode - */ - isLoading?: boolean; - /** - * Check if wallet is connected! - */ - isConnected?: boolean; -}; - -export const ButtonWallet: FC = ({ - label, - src, - isLoading = false, - isConnected = false, - ...props -}) => { - return ( - - {shortenAddress(label)} - - - ); -}; - -type AvatarProps = Pick; - -const Avatar: FC = ({ isConnected, isLoading, src }) => { - if (!isConnected) { - return ; - } - if (isLoading) { - return ; - } - return ; -}; - -type StyledButtonProp = Pick; - -const StyledButton = styled.button.attrs(({ isLoading }) => { - const className = `${ - isLoading ? 'text-primary-500' : 'text-ui-600' - } flex items-center tablet:space-x-1.5 font-bold p-1.5 hover:text-ui-800 - active:text-ui-800 disabled:text-ui-300 bg-ui-0 hover:bg-ui-100 active:bg-ui-200 - disabled:bg-ui-100 rounded-xl focus-visible:ring-2 focus-visible:ring-primary-500`; - return { className }; -})``; - -const StyledLabel = styled.span.attrs({ - className: 'tablet:inline hidden', -})``; diff --git a/src/components/button/index.ts b/src/components/button/index.ts index 6317cb952..3e4d2a3a2 100644 --- a/src/components/button/index.ts +++ b/src/components/button/index.ts @@ -1,4 +1,2 @@ -export * from './buttonGroup'; -export * from './buttonIcon'; -export * from './buttonText'; -export * from './buttonWallet'; +export { Button } from './button'; +export type { IButtonProps } from './button.api'; diff --git a/src/components/cards/cardExecution.stories.tsx b/src/components/cards/cardExecution.stories.tsx deleted file mode 100644 index 35d35b40f..000000000 --- a/src/components/cards/cardExecution.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardExecution, type CardExecutionProps } from './cardExecution'; - -export default { - title: 'Components/Cards/execution', - component: CardExecution, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - title: 'Execution', - description: `These smart actions are executed when the proposal reaches sufficient support. - Find out which actions are executed.`, - to: 'Patito DAO', - from: '0x3430008404144CD5000005A44B8ac3f4DB2a3434', - toLabel: 'To', - fromLabel: 'From', - tokenName: 'DAI', - tokenImageUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/4943.png', - tokenSymbol: 'DAI', - tokenCount: '15,000,230.2323', - treasuryShare: '$1000.0', -}; diff --git a/src/components/cards/cardExecution.test.tsx b/src/components/cards/cardExecution.test.tsx deleted file mode 100644 index 6d8ebef41..000000000 --- a/src/components/cards/cardExecution.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardExecution } from './cardExecution'; - -describe('cardExecution', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('cardExecution'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/cards/cardExecution.tsx b/src/components/cards/cardExecution.tsx deleted file mode 100644 index 055a3d05f..000000000 --- a/src/components/cards/cardExecution.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { ButtonText } from '../button'; -import { CardToken, type CardTokenProps } from './cardToken'; -import { CardTransfer, type CardTransferProps } from './cardTransfer'; - -export type CardExecutionProps = CardTransferProps & { - /** - * Title of the card - */ - title: string; - /** - * Description text - */ - description: string; - /** - * Allows the Execution Card component grow horizontally - * */ - wide?: boolean; - /** Handler for the switch button. Will be called when the button is clicked. - * */ - onClick?: () => void; - /** - * whether the action button is disabled or not - */ - disabledAction?: boolean; -} & Omit< - CardTokenProps, - | 'type' - | 'bgWhite' - | 'changeType' - | 'tokenUSDValue' - | 'changeDuringInterval' - | 'treasurySharePercentage' - | 'percentageChangeDuringInterval' - >; - -export const CardExecution: React.FC = ({ - title, - description, - to, - from, - toLabel, - fromLabel, - tokenName, - tokenImageUrl, - tokenSymbol, - tokenCount, - treasuryShare, - onClick, - disabledAction = true, - wide = false, -}: CardExecutionProps) => { - return ( - -
- {title} - {description} -
- - - - - - - - - ); -}; - -type CardProps = Pick; - -const Card = styled.div.attrs(({ wide }) => ({ - className: `${wide ? 'flex justify-between' : 'w-84'} flex-col bg-white rounded-xl p-3 space-y-3`, -}))``; - -const Header = styled.div.attrs({ - className: 'flex flex-col space-y-1', -})``; - -const Title = styled.h2.attrs({ - className: 'text-ui-800 font-bold text-2xl', -})``; - -const Description = styled.p.attrs({ - className: 'text-ui-600 font-normal text-normal', -})``; - -const Content = styled.div.attrs({ - className: 'flex flex-col space-y-1.5', -})``; - -const Action = styled.div.attrs({ - className: 'flex', -})``; diff --git a/src/components/cards/cardProposal.stories.tsx b/src/components/cards/cardProposal.stories.tsx deleted file mode 100644 index 8e621b059..000000000 --- a/src/components/cards/cardProposal.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardProposal, type CardProposalProps } from './cardProposal'; - -export default { - title: 'Components/Cards/Proposal', - component: CardProposal, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - process: 'pending', - title: 'Title', - description: 'Description', - voteTitle: 'Winning Option', - voteProgress: 70, - voteLabel: 'Yes', - tokenAmount: '3.5M', - tokenSymbol: 'DNT', - publishLabel: 'Published by', - publisherAddress: '0x374d444487A4602750CA00EFdaC5d22B21F130E1', - alertMessage: 'Starts in x days y hours', - stateLabel: ['Draft', 'Pending', 'Active', 'Executed', 'Succeeded', 'Defeated'], - bannerContent: 'Verified Aragon App Update', -}; - -export const Explore = Template.bind({}); -Explore.args = { - type: 'explore', - process: 'active', - title: 'Title', - description: - 'I think the current DAO name doesn’t match our mission and purpose, therefore we should do this, that, and whatever else.', - voteTitle: 'Winning Option', - voteProgress: 70, - voteLabel: 'Yes', - tokenAmount: '3.5M', - tokenSymbol: 'DNT', - publishLabel: 'Published by', - daoName: 'Bob DAO', - publisherAddress: '0x374d444487A4602750CA00EFdaC5d22B21F130E1', - alertMessage: 'Starts in x days y hours', - stateLabel: ['Draft', 'Pending', 'Active', 'Executed', 'Succeeded', 'Defeated'], - bannerContent: 'Verified Aragon App Update', -}; diff --git a/src/components/cards/cardProposal.test.tsx b/src/components/cards/cardProposal.test.tsx deleted file mode 100644 index ab585e070..000000000 --- a/src/components/cards/cardProposal.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardProposal } from './cardProposal'; - -describe('cardProposal', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('cardProposal'); - } - - test('should render without crashing', () => { - const element = setup(properties); - expect(element).toBeInTheDocument; - }); -}); - -const properties = { - state: 'pending', - title: 'Title', - description: 'Description', - voteTitle: 'Winning Option', - voteProgress: 70, - voteLabel: 'Yes', - tokenAmount: '3.5M', - tokenSymbol: 'DNT', - publishLabel: 'Published by', - publisherAddress: '0x374d444487A4602750CA00EFdaC5d22B21F130E1', - alertMessage: ['Starts in x days y hours', 'x days y hours left'], - stateLabel: ['Draft', 'Pending', 'Active', 'Executed', 'Succeeded', 'Defeated'], - onClick: () => { - alert('Pressing this button would allow to change DAO.'); - }, -}; diff --git a/src/components/cards/cardProposal.tsx b/src/components/cards/cardProposal.tsx deleted file mode 100644 index 38307cabb..000000000 --- a/src/components/cards/cardProposal.tsx +++ /dev/null @@ -1,268 +0,0 @@ -import React, { type ReactElement, type ReactNode } from 'react'; -import { styled } from 'styled-components'; - -import { shortenAddress } from '../../utils/addresses'; -import { AlertInline } from '../alerts'; -import { AvatarDao } from '../avatar'; -import { IconClock, IconUpdate } from '../icons'; -import { Link } from '../link'; -import { LinearProgress } from '../progress'; -import { Tag } from '../tag'; - -type ProposalUseCase = 'list' | 'explore'; - -export function isExploreProposal(proposalUseCase: ProposalUseCase): proposalUseCase is 'explore' { - return proposalUseCase === 'explore'; -} - -export type CardProposalProps = { - /** Proposal Title / Title of the card */ - title: string; - /** Proposal Description / Description of the card */ - description: string; - /** - * Will be called when the button is clicked. - * */ - onClick: () => void; - /** - * Available states that proposal card have. by changing the status, - * the headers & buttons wil change to proper format also the progress - * section only available on active state. - * */ - process: 'draft' | 'pending' | 'active' | 'succeeded' | 'executed' | 'defeated'; - /** Indicates whether the proposal is in being used in list or in its special form (see explore page) */ - type?: ProposalUseCase; - /** Url for the dao avatar */ - daoLogo?: 'string'; - /** The title that appears at the top of the progress bar */ - voteTitle: string; - /** Progress bar value in percentage (max: 100) */ - voteProgress?: number | string; - /** Vote label that appears at bottom of the progress bar */ - voteLabel?: string; - /** Label indicating that current user has voted */ - votedAlertLabel?: string; - /** Breakdown of the wining option */ - winningOptionValue?: string; - /** Proposal token amount */ - tokenAmount?: string; - /** Proposal token symbol */ - tokenSymbol?: string; - /** Publish by sentence in any available languages */ - publishLabel: string; - /** Publisher's ethereum address, ENS name **or** DAO address when type is - * explore */ - publisherAddress?: string; - /** DAO name to display when type is explore */ - daoName?: string; - /** Blockchain explorer URL */ - explorer?: string; - - alertMessage?: string; - /** - * ['Draft', 'Pending', 'Active', 'Executed', 'Succeeded', 'Defeated'] - */ - stateLabel: string[]; - - /** Ability to display card banner, nothing passed === banner hidden */ - bannerContent?: ReactNode; - /** Select the icon you want to accompany the banner */ - bannerIcon?: ReactElement; -}; - -export const CardProposal: React.FC = ({ - process = 'pending', - title, - description, - voteTitle, - voteProgress, - voteLabel, - votedAlertLabel, - tokenAmount, - tokenSymbol, - winningOptionValue, - publishLabel, - publisherAddress, - explorer = 'https://etherscan.io/', - alertMessage, - stateLabel, - type = 'list', - daoLogo, - daoName, - onClick, - bannerContent, - bannerIcon = , -}: CardProposalProps) => { - const addressExploreUrl = `${explorer}address/${publisherAddress}`; - - return ( - - {bannerContent && ( - - {bannerIcon} -
{bannerContent}
- - )} - -
- -
- - {title} - {description} - - {isExploreProposal(type) ? ( - - ) : ( - {publishLabel} - )} - - - - - {process === 'active' && voteProgress !== undefined && ( - <> - - - {voteTitle} - - {tokenAmount && tokenSymbol ? `${tokenAmount} ${tokenSymbol}` : winningOptionValue} - - - - - {voteLabel} - {voteProgress}% - - - {votedAlertLabel && ( - - - - )} - - )} - - - ); -}; - -type HeaderOptionProps = Pick & { - type: NonNullable; -}; - -const HeaderOptions: React.VFC = ({ alertMessage, process, stateLabel, type }) => { - switch (process) { - case 'draft': - return ; - case 'pending': - return ( - <> - - {alertMessage && ( - } - mode="neutral" - /> - )} - - ); - case 'active': - return ( - <> - {!isExploreProposal(type) && } - {alertMessage && ( - } - mode="neutral" - /> - )} - - ); - case 'executed': - return ; - case 'succeeded': - return ; - case 'defeated': - return ; - default: - return null; - } -}; - -const Card = styled.button.attrs({ - className: - 'w-full bg-white rounded-xl box-border ' + - 'hover:border hover:border-ui-100 ' + - 'active:border active:border-ui-200 ' + - 'focus:outline-none focus:ring-2 focus:ring-primary-500', -})` - &:hover { - box-shadow: 0px 4px 8px rgba(31, 41, 51, 0.04), 0px 0px 2px rgba(31, 41, 51, 0.06), - 0px 0px 1px rgba(31, 41, 51, 0.04); - } -`; - -const CardBody = styled.div.attrs({ className: 'p-2 space-y-3' })``; - -const CardBanner = styled.div.attrs({ - className: - 'bg-primary-400 text-primary-50 text-sm font-semibold px-2 py-1 flex items-center gap-x-1.5 rounded-t-xl', -})``; - -const Header = styled.div.attrs({ - className: 'flex justify-between', -})``; - -const Title = styled.p.attrs({ - className: 'text-ui-800 text-left font-bold ft-text-xl', -})``; - -const Description = styled.p.attrs({ - className: 'text-ui-600 text-left font-normal ft-text-base line-clamp-2', -})``; - -const Publisher = styled.span.attrs({ - className: 'flex space-x-1 text-ui-500 ft-text-sm', -})``; - -const TextContent = styled.div.attrs({ - className: 'space-y-1.5', -})``; - -const LoadingContent = styled.div.attrs({ - className: 'space-y-2 p-2 bg-ui-50 rounded-xl', -})``; - -const ProgressInfoWrapper = styled.div.attrs({ - className: 'flex justify-between', -})``; - -const ProgressTitle = styled.h3.attrs({ - className: 'text-ui-800 ft-text-base font-bold', -})``; - -const Amount = styled.span.attrs({ - className: 'text-ui-500 ft-text-base', -})``; - -const Vote = styled.span.attrs({ - className: 'text-primary-500 font-bold ft-text-base', -})``; - -const Percentage = styled.span.attrs({ - className: 'text-primary-500 font-bold ft-text-base', -})``; - -const PublisherLabel = styled.p.attrs({ className: '-mr-0.5' })``; - -const VotedAlertWrapper = styled.div.attrs({ - className: 'flex justify-center desktop:justify-start', -})``; diff --git a/src/components/cards/cardText.stories.tsx b/src/components/cards/cardText.stories.tsx deleted file mode 100644 index 66b305c8a..000000000 --- a/src/components/cards/cardText.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardText, type CardTextProps } from './cardText'; - -export default { - title: 'Components/Cards/Text', - component: CardText, -} as Meta; - -const Template: Story = (args) => ; - -export const Text = Template.bind({}); -Text.args = { - type: 'label', - title: 'Title', - content: 'Copy', - bgWhite: true, -}; diff --git a/src/components/cards/cardText.test.tsx b/src/components/cards/cardText.test.tsx deleted file mode 100644 index 94822ea00..000000000 --- a/src/components/cards/cardText.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardText } from './cardText'; - -describe('CardText', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('card-text'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/cards/cardText.tsx b/src/components/cards/cardText.tsx deleted file mode 100644 index c12b8923b..000000000 --- a/src/components/cards/cardText.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -export interface CardTextProps { - type: 'title' | 'label'; - title: string; - content: string; - bgWhite?: boolean; -} - -export const CardText: React.FC = ({ type, title, content, bgWhite = false }) => { - return ( - - {title} -

{content}

- - ); -}; - -type ContainerProps = Pick; - -const Container = styled.div.attrs(({ bgWhite }) => { - const className = `${!bgWhite && 'bg-ui-0'} break-words p-2 tablet:p-3 rounded-xl space-y-1 text-ui-600`; - return { className }; -})``; - -type TitleProps = Pick; - -const Title = styled.p.attrs(({ type }) => { - const className = `${type === 'label' ? 'ft-text-sm text-ui-500' : 'ft-text-base text-ui-800'} font-bold`; - return { className }; -})``; diff --git a/src/components/cards/cardToken.stories.tsx b/src/components/cards/cardToken.stories.tsx deleted file mode 100644 index e17df176c..000000000 --- a/src/components/cards/cardToken.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardToken, type CardTokenProps } from './cardToken'; - -export default { - title: 'Components/Cards/Token', - component: CardToken, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - tokenName: 'DAI', - tokenImageUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/4943.png', - tokenSymbol: 'DAI', - treasurySharePercentage: '45%', - tokenCount: '15,000,230.2323', - tokenUSDValue: '$1', - treasuryShare: '$15,000,230.23', - changeDuringInterval: '+$150,002.30', - percentageChangeDuringInterval: '+ 0.01%', -}; - -export const WithFallback = Template.bind({}); -WithFallback.args = { - tokenName: 'Patito DAO Token', - tokenImageUrl: '', - tokenSymbol: 'PDT', - tokenCount: '15,000,230.2323', - tokenUSDValue: 'Value unknown', - treasuryShare: 'Value unknown', -}; - -export const Transfer = Template.bind({}); -Transfer.args = { - tokenName: 'DAI', - tokenImageUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/4943.png', - tokenSymbol: 'DAI', - tokenCount: '15,000,230.2323', - treasuryShare: '$15,000,230.23', -}; diff --git a/src/components/cards/cardToken.test.tsx b/src/components/cards/cardToken.test.tsx deleted file mode 100644 index 989a262a5..000000000 --- a/src/components/cards/cardToken.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardToken } from './cardToken'; - -describe('CardToken', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('cardToken'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/cards/cardToken.tsx b/src/components/cards/cardToken.tsx deleted file mode 100644 index 676172b32..000000000 --- a/src/components/cards/cardToken.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { type ReactNode, type SyntheticEvent } from 'react'; -import { styled } from 'styled-components'; - -import FallbackImg from '../../assets/avatar-token.svg'; -import { Tag } from '../tag'; - -export type CardTokenProps = { - tokenName: string; - tokenSymbol: string; - tokenImageUrl: string; - treasurySharePercentage?: string; - tokenCount: number | string; - tokenUSDValue?: string; - treasuryShare?: string; - type?: 'vault' | 'transfer'; - bgWhite?: boolean; - changeType?: 'Positive' | 'Negative'; - changeDuringInterval?: string; - percentageChangeDuringInterval?: string; -}; - -// TODO: when refactoring, separate returns for vault and transfer -export const CardToken: React.FC = ({ - type = 'vault', - bgWhite = false, - changeType = 'Positive', - ...props -}) => { - const isVault = type === 'vault'; - - return ( - - - ) => { - e.currentTarget.src = FallbackImg; - }} - /> - - - {props.tokenName} - - {props.treasurySharePercentage && isVault && } - - - {isVault && ( - -
-
{props.tokenCount}
{props.tokenSymbol}
-
- {props.tokenUSDValue && ( - - • - {props.tokenUSDValue} - - )} - - )} - - - - - {isVault ? ( -
{props.treasuryShare}
- ) : ( -
-
{props.tokenCount}
{props.tokenSymbol}
-
- )} - - - - {isVault ? ( - <> - {props.changeDuringInterval && ( - - - {props.changeDuringInterval} - - - )} - {props.percentageChangeDuringInterval && ( - - )} - - ) : ( -
{props.treasuryShare}
- )} - - - - ); -}; - -type CardProps = Pick; - -const Card = styled.div.attrs(({ bgWhite }) => ({ - className: `flex justify-between space-x-4 items-center py-2.5 px-3 overflow-hidden ${ - bgWhite ? 'bg-ui-50' : 'bg-ui-0' - } rounded-xl`, -}))``; - -const CoinDetailsWithImage = styled.div.attrs({ - className: 'flex items-center flex-auto', -})``; - -const CoinImage = styled.img.attrs(({ src }) => ({ - className: 'w-3 h-3 tablet:h-5 tablet:w-5 rounded-full', - src, -}))``; - -const CoinDetails = styled.div.attrs({ - className: 'ml-2 space-y-1 overflow-hidden', -})``; - -const CoinNameAndAllocation = styled.div.attrs({ - className: 'flex items-start space-x-1', -})``; - -const CoinName = styled.h1.attrs({ - className: 'font-bold text-ui-800 truncate', -})``; - -const SecondaryCoinDetails = styled.div.attrs({ - className: 'ft-text-sm text-ui-500 space-x-0.5 tablet:flex', -})``; - -const MarketProperties = styled.div.attrs({ - className: 'text-right space-y-1 flex-auto overflow-hidden', -})``; - -const FiatValue = styled.h1.attrs({ - className: 'font-bold text-ui-800', -})``; - -const SecondaryFiatDetails = styled.div.attrs({ - className: 'ft-text-sm text-ui-500 space-x-1 flex justify-end items-center truncate', -})``; - -type ToggleMobileVisibilityProps = { - visible: boolean; - children: ReactNode; -}; - -const ToggleMobileVisibility: React.FC = ({ visible, children }) => { - return
{children}
; -}; diff --git a/src/components/cards/cardTransfer.stories.tsx b/src/components/cards/cardTransfer.stories.tsx deleted file mode 100644 index 32d486068..000000000 --- a/src/components/cards/cardTransfer.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardTransfer, type CardTransferProps } from './cardTransfer'; - -export default { - title: 'Components/Cards/Transfer', - component: CardTransfer, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - to: 'Patito DAO', - from: '0x3430008404144CD5000005A44B8ac3f4DB2a3434', - toLabel: 'To', - fromLabel: 'From', -}; diff --git a/src/components/cards/cardTransfer.test.tsx b/src/components/cards/cardTransfer.test.tsx deleted file mode 100644 index 731fe9118..000000000 --- a/src/components/cards/cardTransfer.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardTransfer } from './cardTransfer'; - -describe('CardTransfer', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('cardTransfer'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/cards/cardTransfer.tsx b/src/components/cards/cardTransfer.tsx deleted file mode 100644 index 69ebedd70..000000000 --- a/src/components/cards/cardTransfer.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { IsAddress, shortenAddress } from '../../utils/addresses'; -import { IconChevronRight } from '../icons'; - -export type CardTransferProps = { - to: string; - from: string; - toLabel: string; - fromLabel: string; - bgWhite?: boolean; -}; - -/** Transfer header showing the sender and recipient */ -export const CardTransfer: React.FC = ({ to, from, toLabel, fromLabel, bgWhite = false }) => { - return ( - - - - - - ); -}; - -type CardProps = { - label: string; - copy: string; - bgWhite: boolean; -}; -const Card: React.FC = ({ label, copy, bgWhite }) => { - return ( - - - {IsAddress(copy) ? shortenAddress(copy) : copy} - - ); -}; - -const CardContainer = styled.div.attrs({ - className: 'flex items-center space-x-1', -})``; - -type ContainerProps = { bgWhite: boolean }; -const Container = styled.div.attrs(({ bgWhite }) => { - return { - className: `flex-1 py-1.5 px-2 min-w-0 text-left ${bgWhite ? 'bg-ui-50' : 'bg-ui-0'} rounded-xl`, - }; -})``; - -const Label = styled.p.attrs({ - className: 'ft-text-sm text-ui-500 capitalize', -})``; - -// TODO: Revisit address shortening -type ValueProps = { isAddress: boolean }; -const Value = styled.p.attrs(({ isAddress }) => { - const className = isAddress - ? 'font-bold text-ui-800' - : 'overflow-hidden font-bold text-ui-800 text-ellipsis whitespace-nowrap'; - - return { className }; -})``; diff --git a/src/components/cards/cardWallet.stories.tsx b/src/components/cards/cardWallet.stories.tsx deleted file mode 100644 index e87f616d6..000000000 --- a/src/components/cards/cardWallet.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CardWallet, type CardWalletProps } from './cardWallet'; - -export default { - title: 'Components/Cards/Wallet', - component: CardWallet, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - src: 'https://place-hold.it/150x150', - name: 'ens-name.eth', - address: '0x6720000000000000000000000000000000007739', -}; diff --git a/src/components/cards/cardWallet.test.tsx b/src/components/cards/cardWallet.test.tsx deleted file mode 100644 index bba82be78..000000000 --- a/src/components/cards/cardWallet.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CardWallet } from './cardWallet'; - -describe('CardWallet', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('cardWallet'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/cards/cardWallet.tsx b/src/components/cards/cardWallet.tsx deleted file mode 100644 index 5ed0b359a..000000000 --- a/src/components/cards/cardWallet.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { shortenAddress } from '../../utils/addresses'; -import { Avatar } from '../avatar'; -import { ButtonText } from '../button'; -import { IconCopy } from '../icons'; - -export type CardWalletProps = { - /** - * wallet ENS name or wallet eth address - */ - name?: string | null; - /** - * Wallet eth address - */ - address: string | null; - /** - * Allows the Wallet Card component grow horizontally - */ - wide: boolean; - /** - * Avatar Image source - */ - src: string | null; -}; - -/** - * WalletCard UI component - */ -export const CardWallet: React.FC = ({ src, name, address, wide = false }) => { - const copyToClipboard = () => { - navigator.clipboard.writeText(address ?? ''); - }; - - return ( - - - - - {shortenAddress(name ?? address)} - {name && {shortenAddress(address)}} - - - } - mode="ghost" - bgWhite - size="small" - onClick={copyToClipboard} - /> - - ); -}; - -type ContainerProps = Pick; -const Card = styled.div.attrs(({ wide }) => ({ - className: `flex items-center ${wide && 'w-full justify-between'} space-x-1.5`, -}))``; - -const Content = styled.div.attrs({ - className: 'flex items-center space-x-1.5', -})``; - -const TextContainer = styled.div.attrs({ - className: 'text-left', -})``; - -const Title = styled.p.attrs({ - className: 'text-ui-700 font-bold', -})``; - -const Subtitle = styled.p.attrs({ - className: 'ft-text-sm text-ui-500', -})``; diff --git a/src/components/cards/index.ts b/src/components/cards/index.ts deleted file mode 100644 index 9e77acc6e..000000000 --- a/src/components/cards/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './cardExecution'; -export * from './cardProposal'; -export * from './cardText'; -export * from './cardToken'; -export * from './cardTransfer'; -export * from './cardWallet'; diff --git a/src/components/checkbox/checkboxListItem.stories.tsx b/src/components/checkbox/checkboxListItem.stories.tsx deleted file mode 100644 index 6d0189b25..000000000 --- a/src/components/checkbox/checkboxListItem.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { CheckboxListItem, type CheckboxListItemProps } from './checkboxListItem'; - -export default { - title: 'Components/Checkbox/ListItem', - component: CheckboxListItem, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - label: 'Label', - helptext: 'Helptext', - multiSelect: true, - disabled: false, - type: 'default', - onClick: () => alert('click'), -}; - -export const ListGroup = () => { - const [selectedIndex, setIndex] = useState(1); - - const handleOnClick = (index: number) => { - if (index !== selectedIndex) { - setIndex(index); - } - }; - - return ( -
- handleOnClick(1)} - type={selectedIndex === 1 ? 'active' : 'default'} - /> - handleOnClick(2)} - type={selectedIndex === 2 ? 'active' : 'default'} - /> -
- ); -}; diff --git a/src/components/checkbox/checkboxListItem.test.tsx b/src/components/checkbox/checkboxListItem.test.tsx deleted file mode 100644 index c4f49f083..000000000 --- a/src/components/checkbox/checkboxListItem.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CheckboxListItem } from './checkboxListItem'; - -describe('CheckboxListItem', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('checkboxListItem'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/checkbox/checkboxListItem.tsx b/src/components/checkbox/checkboxListItem.tsx deleted file mode 100644 index ccf2ed27d..000000000 --- a/src/components/checkbox/checkboxListItem.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { - IconCheckboxDefault, - IconCheckboxMulti, - IconCheckboxSelected, - IconRadioDefault, - IconRadioSelected, -} from '../icons'; - -export const Icons = { - multiSelect: { - active: , - multi: , - default: , - error: , - }, - radio: { - active: , - multi: , - default: , - error: , - }, -}; - -export type CheckboxListItemProps = { - label: string; - helptext?: string; - disabled?: boolean; - multiSelect?: boolean; - type?: 'default' | 'error' | 'active' | 'multi'; - onClick?: React.MouseEventHandler; -}; - -export const CheckboxListItem: React.FC = ({ - label, - helptext, - multiSelect = false, - disabled = false, - type = 'default', - onClick, -}) => { - return ( - - -

{label}

- {Icons[multiSelect ? 'multiSelect' : 'radio'][type]} - - {helptext && {helptext}} - - ); -}; - -type ContainerTypes = { - disabled: boolean; - type: CheckboxListItemProps['type']; -}; - -const Container = styled.div.attrs(({ disabled, type }) => ({ - className: `py-1.5 px-2 rounded-xl border-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ${ - disabled - ? 'bg-ui-100 border-ui-300' - : `bg-ui-0 group hover:border-primary-500 cursor-pointer ${ - type === 'error' ? 'border-critical-500' : type !== 'default' ? 'border-primary-500' : 'border-ui-100' - }` - }`, - tabIndex: disabled ? -1 : 0, -}))``; - -const HStack = styled.div.attrs(({ disabled, type }) => ({ - className: `flex justify-between items-center group-hover:text-primary-500 space-x-1.5 ${ - disabled ? 'text-ui-600' : type === 'default' || type === 'error' ? 'text-ui-600' : 'text-primary-500' - }`, -}))``; - -const Helptext = styled.p.attrs({ - className: 'ft-text-sm text-ui-500 mt-0.25 mr-3.5', -})``; diff --git a/src/components/checkbox/checkboxSimple.stories.tsx b/src/components/checkbox/checkboxSimple.stories.tsx deleted file mode 100644 index 96af572fa..000000000 --- a/src/components/checkbox/checkboxSimple.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { CheckboxSimple, type CheckboxSimpleProps } from './checkboxSimple'; - -export default { - title: 'Components/Checkbox/Simple', - component: CheckboxSimple, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - label: 'Label', - iconLeft: true, - multiSelect: true, - disabled: false, - state: 'default', - onClick: () => alert('checkbox clicked'), -}; diff --git a/src/components/checkbox/checkboxSimple.test.tsx b/src/components/checkbox/checkboxSimple.test.tsx deleted file mode 100644 index 5891e439d..000000000 --- a/src/components/checkbox/checkboxSimple.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { CheckboxSimple } from './checkboxSimple'; - -describe('CheckboxSimple', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('checkboxSimple'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/checkbox/checkboxSimple.tsx b/src/components/checkbox/checkboxSimple.tsx deleted file mode 100644 index ea0a8c56e..000000000 --- a/src/components/checkbox/checkboxSimple.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { Icons } from './checkboxListItem'; - -export type CheckboxSimpleProps = { - label: string; - iconLeft?: boolean; - multiSelect: boolean; - disabled?: boolean; - state?: 'default' | 'active' | 'multi'; - onClick?: React.MouseEventHandler; -}; - -export const CheckboxSimple: React.FC = ({ - label, - iconLeft = true, - multiSelect, - disabled = false, - state = 'default', - onClick, -}) => { - return ( - - {Icons[multiSelect ? 'multiSelect' : 'radio'][state]} -

{label}

- - ); -}; - -type ContainerTypes = { - disabled: boolean; - state: 'default' | 'active' | 'multi'; - iconLeft: boolean; -}; - -const Container = styled.div.attrs(({ disabled, state, iconLeft }) => ({ - className: `flex w-max space-x-1.5 items-center ${!iconLeft && 'flex-row-reverse space-x-reverse'} ${ - disabled - ? 'text-ui-300' - : `cursor-pointer hover:text-primary-500 ${state !== 'default' ? 'text-primary-500' : 'text-ui-600'}` - }`, -}))``; diff --git a/src/components/checkbox/index.ts b/src/components/checkbox/index.ts deleted file mode 100644 index dc1c06dbc..000000000 --- a/src/components/checkbox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './checkboxListItem'; -export * from './checkboxSimple'; diff --git a/src/components/dropdown/dropdown.stories.tsx b/src/components/dropdown/dropdown.stories.tsx deleted file mode 100644 index 92740fc85..000000000 --- a/src/components/dropdown/dropdown.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { ButtonIcon, ButtonText } from '../button/'; -import { IconChevronRight, IconMenuVertical } from '../icons'; -import { ListItemAction } from '../listItem'; -import { Dropdown, type DropdownProps, type ListItemProps } from './dropdown'; - -export default { - title: 'Components/Dropdown', - component: Dropdown, -} as Meta; - -const Template: Story = (args) => ( -
-
- -
-
-); - -const items: ListItemProps[] = [ - { - component: } title="first item" />, - callback: () => { - alert('first item selected'); - }, - }, - { - component: } title="second item" />, - callback: () => { - alert('second item selected'); - }, - }, -]; - -export const Default = Template.bind({}); -Default.args = { - side: 'bottom', - trigger: , - listItems: items, -}; - -export const MenuButtonWithIcon = Template.bind({}); -MenuButtonWithIcon.args = { - side: 'bottom', - trigger: } />, - listItems: items, -}; diff --git a/src/components/dropdown/dropdown.test.tsx b/src/components/dropdown/dropdown.test.tsx deleted file mode 100644 index 73743975f..000000000 --- a/src/components/dropdown/dropdown.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { ButtonText } from '../button'; -import { Dropdown } from './dropdown'; - -describe('Dropdown', () => { - // eslint-disable-next-line - function setup({ children, ...props }: any) { - render( - } {...props}> - {children} - , - ); - return screen.getByTestId('dropdown-trigger'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx deleted file mode 100644 index 38741cbbc..000000000 --- a/src/components/dropdown/dropdown.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; -import React from 'react'; -import { styled } from 'styled-components'; - -// NOTE: I'm not sure whether having a callback per list item is the ideal API -// for this component. The reasoning for doing it this way, is that this -// simplifies triggering action off of a menu item. Instead of having to watch -// for changes on a state handled by the parent and take action based on that -// state changing. Maybe I'm wrong, though. We can always add value/setValue -// props controlled by the parent's later, if that proves more useful. -// [VR 21-02-2022] - -export type ListItemProps = { - /** - * The components to render as list item. Typically, a component. - */ - component: React.ReactNode; - /** - * The function that will be called when this list item is selected (via - * keyboard, mouse, etc). - */ - callback?: (event: Event) => void; -}; - -export type CustomDropdownContentProps = Omit; - -export type DropdownProps = CustomDropdownContentProps & { - /** - * The controlled open state of the dropdown. Must be used in conjunction with onOpenChange. - */ - open?: boolean; - - /** - * Event handler called when the open state of the dropdown changes. - */ - onOpenChange?: (open: boolean) => void; - - /** - * Element that triggers the opening state of the dropdown menu. - */ - trigger: React.ReactNode; - /** - * The items inside the open dropdown menu. - */ - listItems: ListItemProps[]; - disabled?: boolean; -}; - -export const Dropdown: React.FC = ({ - open, - onOpenChange, - trigger, - listItems, - disabled = false, - ...rest -}: DropdownProps) => { - return ( - - - {trigger} - - - - - {listItems?.map((li, index) => ( - - {li.component} - - ))} - - - - - ); -}; - -const StyledContent = styled(DropdownMenu.Content).attrs({ - className: 'bg-ui-0 rounded-xl p-1 shadow-xl' as string, -})``; - -const StyledItem = styled(DropdownMenu.Item).attrs({ - className: 'rounded-xl outline-none focus:outline-none focus:ring focus:ring-primary-200', -})` - &:hover:focus { - outline: none; - box-shadow: none; - } -`; diff --git a/src/components/dropdown/index.ts b/src/components/dropdown/index.ts deleted file mode 100644 index b96a997b0..000000000 --- a/src/components/dropdown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dropdown'; diff --git a/src/components/headers/headerDao.stories.tsx b/src/components/headers/headerDao.stories.tsx deleted file mode 100644 index ec955cee3..000000000 --- a/src/components/headers/headerDao.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { HeaderDao, type HeaderDaoProps } from './headerDao'; - -export default { - title: 'Components/Headers/Dao', - component: HeaderDao, -} as Meta; - -const Template: Story = (args) => ; - -export const Dao = Template.bind({}); -Dao.args = { - daoName: 'DaoName', - daoAddress: '0x999e89E75B3C49D3eF628f804F2c10e9A91F0C57', - daoEnsName: 'daoName.dao.eth', - description: - 'We are a community that loves trees and the planet. We track where forestation is increasing (or shrinking), fund people who are growing and protecting trees We are a community that loves trees and the planet. We track where forestation is increasing (or shrinking), fund people who are growing and protecting trees We are a community that loves trees and the planet.', - created_at: 'March 2022', - daoChain: 'Arbitrum', - daoType: 'Wallet Based', - daoUrl: 'app.aragon.org/#/daos/arbitrum/daoName', - translation: { - readMore: 'Read more', - readLess: 'Read less', - follow: 'follow', - following: 'following', - }, - links: [ - { - label: 'Website', - href: 'https://google.com', - }, - { - label: 'Discord', - href: 'https://google.com', - }, - { - label: 'Forum', - href: 'https://google.com', - }, - ], -}; diff --git a/src/components/headers/headerDao.test.tsx b/src/components/headers/headerDao.test.tsx deleted file mode 100644 index 02a0814be..000000000 --- a/src/components/headers/headerDao.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { HeaderDao } from './headerDao'; - -describe('HeaderDao', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('header-dao'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/headers/headerDao.tsx b/src/components/headers/headerDao.tsx deleted file mode 100644 index 0c451ad96..000000000 --- a/src/components/headers/headerDao.tsx +++ /dev/null @@ -1,318 +0,0 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; -import { useScreen } from '../../hooks'; -import { shortenAddress, shortenDaoUrl } from '../../utils'; -import { AvatarDao } from '../avatar'; -import { ButtonText } from '../button'; -import { Dropdown } from '../dropdown'; -import { IconBlock, IconCheckmark, IconChevronDown, IconChevronUp, IconCommunity, IconCopy, IconFlag } from '../icons'; -import { Link } from '../link'; -import { ListItemLink } from '../listItem'; - -const DEFAULT_LINES_SHOWN = 2; -const DEFAULT_LINKS_SHOWN = 3; -const DEFAULT_TRANSLATIONS: HeaderDaoProps['translation'] = { - follow: 'Follow', - following: 'Following', - readLess: 'Read less', - readMore: 'Read more', -}; - -export type HeaderDaoProps = { - daoName: string; - daoAddress: string; - daoEnsName?: string; - daoAvatar?: string; - daoUrl: string; - description: string; - created_at: string; - daoChain: string; - daoType: string; - following?: boolean; - links?: Array<{ - label: string; - href: string; - }>; - translation?: { - readMore: string; - readLess: string; - follow: string; - following: string; - }; - onCopy?: (input: string) => void; - onFavoriteClick?: (e: React.MouseEvent) => void; -}; - -type DescriptionProps = { - fullDescription?: boolean; -}; - -export const HeaderDao: React.FC = ({ - daoName, - daoAddress, - daoEnsName, - daoAvatar, - daoUrl, - description, - created_at, - daoChain, - daoType, - following = false, - links = [], - translation = {}, - onCopy, - onFavoriteClick, -}) => { - const labels = { ...DEFAULT_TRANSLATIONS, ...translation }; - - const [showAll, setShowAll] = useState(true); - const [shouldClamp, setShouldClamp] = useState(false); - - const { isDesktop } = useScreen(); - - const descriptionRef = useRef(null); - - // this should be extracted into a hook if clamping/showing elsewhere - useEffect(() => { - function countNumberOfLines() { - const descriptionEl = descriptionRef.current; - - if (!descriptionEl) { - return; - } - - const numberOfLines = descriptionEl.offsetHeight / parseFloat(getComputedStyle(descriptionEl).lineHeight); - - setShouldClamp(numberOfLines > DEFAULT_LINES_SHOWN); - setShowAll(numberOfLines <= DEFAULT_LINES_SHOWN); - } - - countNumberOfLines(); - - window.addEventListener('resize', countNumberOfLines); - - return () => { - window.removeEventListener('resize', countNumberOfLines); - }; - }, []); - - // always show dropdown if there are links, unless we're on desktop with less than 3 links - const showDropdown = !(links?.length <= DEFAULT_LINKS_SHOWN && isDesktop) && links?.length !== 0; - - const daoCredentialsDropdownItems = useMemo(() => { - const result = [ - { - component: ( - onCopy?.(daoAddress)}> - {shortenAddress(daoAddress)} - - - ), - }, - { - component: ( - onCopy?.(`https://${daoUrl}`)}> - {shortenDaoUrl(daoUrl)} - - - ), - }, - ]; - - if (daoEnsName) { - result.unshift({ - component: ( - onCopy?.(daoEnsName)}> - {daoEnsName} - - - ), - }); - } - - return result; - }, [onCopy, daoAddress, daoEnsName, daoUrl]); - - return ( - - - - {daoName} - - } - /> - } - sideOffset={8} - listItems={daoCredentialsDropdownItems} - /> - -
- - {description} - - {shouldClamp && ( - , - } - : { - label: labels.readMore, - iconRight: , - })} - className="ft-text-base" - onClick={() => setShowAll((prevState) => !prevState)} - /> - )} -
- - - - - - - - - - {created_at} - - - - {daoChain} - - - - {daoType} - - - - - {links?.slice(0, DEFAULT_LINKS_SHOWN)?.map(({ label, href }, index: number) => ( - - ))} - - - {showDropdown && ( - } - label="All Links" - mode="secondary" - size="large" - bgWhite - /> - } - sideOffset={8} - className="max-w-xs" - listItems={links?.map(({ label, href }, index: number) => ({ - component: ( -
- -
- ), - }))} - /> - )} - , label: labels.following } - : { label: labels.follow })} - /> - - - - - ); -}; - -const Card = styled.div.attrs({ - className: 'w-full bg-white tablet:rounded-xl p-2 tablet:p-3 desktop:p-6 border border-ui-100 space-y-3', -})` - box-shadow: 0px 4px 8px rgba(31, 41, 51, 0.04), 0px 0px 2px rgba(31, 41, 51, 0.06), - 0px 0px 1px rgba(31, 41, 51, 0.04); -`; - -const ContentWrapper = styled.div.attrs({ - className: 'flex justify-between grid grid-cols-12', -})``; - -const Content = styled.div.attrs({ - className: 'col-span-10', -})``; - -const AvatarContainer = styled.div.attrs({ - className: 'tablet:flex hidden justify-end col-span-2 desktop:items-center', -})``; - -const Title = styled.h1.attrs({ - className: 'ft-text-3xl font-bold text-ui-800', -})``; - -const Description = styled.p.attrs({ - className: 'font-medium text-ui-600 ft-text-base', -})` - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: ${(props) => (props.fullDescription ? 'unset' : DEFAULT_LINES_SHOWN)}; -`; - -const DetailsWrapper = styled.div.attrs({ - className: 'flex items-center justify-between flex-col tablet:flex-row', -})``; - -const NetworkDetailsContainer = styled.div.attrs({ - className: 'flex space-x-3 w-full tablet:w-auto', -})``; - -const NetworkDetails = styled.div.attrs({ - className: 'flex space-x-1 items-center justify-center', -})``; - -const DetailsText = styled.span.attrs({ - className: 'text-ui-600 ft-text-sm' as string | undefined, -})``; - -const LinksWrapper = styled.div.attrs({ - className: 'space-x-3 hidden desktop:flex', -})``; - -const ActionContainer = styled.div.attrs({ - className: 'flex space-x-1.5 w-full justify-between', -})``; - -const ActionWrapper = styled.div.attrs({ - className: - 'flex items-center tablet:space-x-3 justify-between tablet:justify-start w-full tablet:w-max space-y-3 tablet:space-y-0', -})``; - -const CredentialsDropdownItem = styled.div.attrs({ - className: `flex text-ui-600 items-center justify-between gap-1.5 py-1.5 font-semibold ft-text-base hover:bg-primary-50 px-2 rounded-xl hover:text-primary-400`, -})``; - -const CredentialsDropdownTrigger = styled(Link).attrs({ - className: - 'mt-1.5 text-primary-400 hover:text-primary-600 active:text-primary-800 focus-visible:ring focus-visible:ring-primary-200 focus-visible:bg-ui-50', -})``; - -const StyledCopyIcon = styled(IconCopy).attrs({ - className: 'text-ui-400', -})``; diff --git a/src/components/headers/headerPage.stories.tsx b/src/components/headers/headerPage.stories.tsx deleted file mode 100644 index de5da11cc..000000000 --- a/src/components/headers/headerPage.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconAdd, IconFinance, IconLinkExternal } from '../icons'; -import { HeaderPage, type HeaderPageProps } from './headerPage'; - -export default { - title: 'Components/Headers/Page', - component: HeaderPage, -} as Meta; - -const Template: Story = (args) => ; - -export const Page = Template.bind({}); -Page.args = { - title: 'Title', - description: 'description', - - breadCrumbs: { - crumbs: [ - { label: 'Finance', path: '/abc' }, - { label: 'Tokens', path: '/abc' }, - { label: 'Third Level', path: '/abc' }, - ], - icon: , - onClick: (path) => alert(path), - }, - - primaryBtnProps: { - iconLeft: , - label: 'Primary Action', - }, - - secondaryBtnProps: { - iconRight: , - label: 'Secondary Action', - disabled: true, - }, -}; diff --git a/src/components/headers/headerPage.test.tsx b/src/components/headers/headerPage.test.tsx deleted file mode 100644 index 3737f9f91..000000000 --- a/src/components/headers/headerPage.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { HeaderPage } from './headerPage'; - -describe('HeaderPage', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('header-page'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/headers/headerPage.tsx b/src/components/headers/headerPage.tsx deleted file mode 100644 index 120458984..000000000 --- a/src/components/headers/headerPage.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { Breadcrumb, type BreadcrumbProps, type DefaultCrumbProps } from '../breadcrumb'; -import { ButtonText, type ButtonTextProps } from '../button'; - -export type HeaderPageProps = { - /** Page title */ - title: string; - /** Page description */ - description?: string; - /** Primary action button properties */ - primaryBtnProps?: Omit; - /** Secondary action button properties */ - secondaryBtnProps?: Omit; - /** Breadcrumb properties */ - breadCrumbs: DefaultCrumbProps & NonNullable>; -}; - -export const HeaderPage: React.FC = ({ - title, - description, - breadCrumbs, - primaryBtnProps, - secondaryBtnProps, -}) => { - return ( - - - - - - - {title} - {description} - - {/* Mode,size, bgWhite should not be changed, adding after spread to override */} - - {secondaryBtnProps && } - {primaryBtnProps && } - - - - ); -}; - -const Card = styled.div.attrs({ - className: - 'flex flex-col p-2 pb-3 tablet:p-3 desktop:p-5 bg-ui-0 gap-y-2 tablet:gap-y-3 tablet:rounded-xl tablet:border tablet:border-ui-100 tablet:shadow-100', -})``; - -const TextContent = styled.div.attrs({ - className: 'tablet:flex-1 space-y-1 desktop:space-y-2', -})``; - -const Title = styled.h2.attrs({ - className: 'ft-text-3xl font-bold text-ui-800', -})``; - -const Description = styled.div.attrs({ - className: 'ft-text-lg text-ui-600', -})``; - -const ContentWrapper = styled.div.attrs({ - className: - 'flex flex-col tablet:flex-row gap-y-2 tablet:gap-x-6 tablet:items-start desktop:items-center desktop:mt-0 desktop:pt-0', -})``; - -const ButtonGroup = styled.div.attrs({ - className: 'flex flex-col-reverse tablet:flex-row gap-2', -})``; - -const BreadcrumbWrapper = styled.div.attrs({ - className: 'desktop:hidden desktop:h-0 flex', -})``; diff --git a/src/components/headers/index.ts b/src/components/headers/index.ts deleted file mode 100644 index b7688585e..000000000 --- a/src/components/headers/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './headerDao'; -export * from './headerPage'; diff --git a/src/components/icon/icon.stories.tsx b/src/components/icon/icon.stories.tsx new file mode 100644 index 000000000..271287e94 --- /dev/null +++ b/src/components/icon/icon.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Icon } from './icon'; +import { IconType } from './iconType'; + +const meta: Meta = { + title: 'components/Icon', + component: Icon, + tags: ['autodocs'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=8842-13134&mode=dev', + }, + }, +}; + +type Story = StoryObj; + +/** + * Default usage example of the Icon component. + */ +export const Default: Story = { + args: { + icon: IconType.ADD, + responsiveSize: { md: 'lg' }, + }, +}; + +/** + * All available icons of the ODS library. + */ +export const AvailableIcons: Story = { + render: () => { + return ( +
+ {Object.keys(IconType).map((iconType) => ( + + ))} +
+ ); + }, +}; + +export default meta; diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx new file mode 100644 index 000000000..74062d62a --- /dev/null +++ b/src/components/icon/icon.test.tsx @@ -0,0 +1,21 @@ +import { render, screen } from '@testing-library/react'; + +import { Icon, type IIconProps } from './icon'; +import { IconType } from './iconType'; + +describe(' component', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IIconProps = { + icon: IconType.ADD, + ...props, + }; + + return ; + }; + + it('renders an icon', () => { + const icon = IconType.BLOCKCHAIN; + render(createTestComponent({ icon })); + expect(screen.getByTestId(icon)).toBeInTheDocument(); + }); +}); diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx new file mode 100644 index 000000000..957e0ac07 --- /dev/null +++ b/src/components/icon/icon.tsx @@ -0,0 +1,43 @@ +import classNames from 'classnames'; +import type { SVGProps } from 'react'; + +import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../../types'; +import { responsiveUtils } from '../../utils'; +import { iconList } from './iconList'; +import type { IconType } from './iconType'; + +export type IconSize = 'sm' | 'md' | 'lg'; + +export interface IIconProps extends SVGProps { + icon: IconType; + size?: IconSize; + responsiveSize?: ResponsiveAttribute; +} + +const iconClasses: ResponsiveAttributeClassMap = { + sm: { + sm: 'w-3 h-3', + md: 'md:w-3 md:h-3', + lg: 'lg:w-3 lg:h-3', + }, + md: { + sm: 'w-4 h-4', + md: 'md:w-4 md:h-4', + lg: 'lg:w-4 lg:h-4', + }, + lg: { + sm: 'w-5 h-5', + md: 'md:w-5 md:h-5', + lg: 'lg:w-5 lg:h-5', + }, +}; + +export const Icon: React.FC = (props) => { + const { icon, size = 'md', className, responsiveSize = {}, ...otherProps } = props; + + const IconComponent = iconList[icon]; + + const classes = responsiveUtils.generateClassNames(size, responsiveSize, iconClasses); + + return ; +}; diff --git a/src/components/icon/iconList.ts b/src/components/icon/iconList.ts new file mode 100644 index 000000000..0e45a8e2c --- /dev/null +++ b/src/components/icon/iconList.ts @@ -0,0 +1,125 @@ +import { type SVGProps } from 'react'; +import Add from '../../assets/icons/add.svg'; +import AppCommunity from '../../assets/icons/app-community.svg'; +import AppDashboard from '../../assets/icons/app-dashboard.svg'; +import AppFinance from '../../assets/icons/app-finance.svg'; +import AppGovernance from '../../assets/icons/app-governance.svg'; +import Blockchain from '../../assets/icons/blockchain.svg'; +import Calendar from '../../assets/icons/calendar.svg'; +import CheckboxDefault from '../../assets/icons/checkbox-default.svg'; +import CheckboxMulti from '../../assets/icons/checkbox-multi.svg'; +import CheckboxSelected from '../../assets/icons/checkbox-selected.svg'; +import Checkmark from '../../assets/icons/checkmark.svg'; +import ChevronDown from '../../assets/icons/chevron-down.svg'; +import ChevronLeft from '../../assets/icons/chevron-left.svg'; +import ChevronRight from '../../assets/icons/chevron-right.svg'; +import ChevronUp from '../../assets/icons/chevron-up.svg'; +import Clock from '../../assets/icons/clock.svg'; +import Close from '../../assets/icons/close.svg'; +import Copy from '../../assets/icons/copy.svg'; +import Expand from '../../assets/icons/expand.svg'; +import Explore from '../../assets/icons/explore.svg'; +import FavouriteDefault from '../../assets/icons/favourite-default.svg'; +import FavouriteSelected from '../../assets/icons/favourite-selected.svg'; +import Feedback from '../../assets/icons/feedback.svg'; +import Filter from '../../assets/icons/filter.svg'; +import Flag from '../../assets/icons/flag.svg'; +import GasFee from '../../assets/icons/gas-fee.svg'; +import Home from '../../assets/icons/home.svg'; +import Info from '../../assets/icons/info.svg'; +import LinkExternal from '../../assets/icons/link-external.svg'; +import MenuDefault from '../../assets/icons/menu-default.svg'; +import MenuHorizontal from '../../assets/icons/menu-horizontal.svg'; +import MenuVertical from '../../assets/icons/menu-vertical.svg'; +import Person from '../../assets/icons/person.svg'; +import Question from '../../assets/icons/question.svg'; +import RadioCancel from '../../assets/icons/radio-cancel.svg'; +import RadioCheck from '../../assets/icons/radio-check.svg'; +import RadioDefault from '../../assets/icons/radio-default.svg'; +import RadioPause from '../../assets/icons/radio-pause.svg'; +import RadioSelected from '../../assets/icons/radio-selected.svg'; +import Reload from '../../assets/icons/reload.svg'; +import Remove from '../../assets/icons/remove.svg'; +import Search from '../../assets/icons/search.svg'; +import Settings from '../../assets/icons/settings.svg'; +import Shrink from '../../assets/icons/shrink.svg'; +import Sort from '../../assets/icons/sort.svg'; +import Switch from '../../assets/icons/switch.svg'; +import TurnOff from '../../assets/icons/turn-off.svg'; +import TxDeposit from '../../assets/icons/tx-deposit.svg'; +import TxFailure from '../../assets/icons/tx-failure.svg'; +import TxSmartContract from '../../assets/icons/tx-smart-contract.svg'; +import TxWithdraw from '../../assets/icons/tx-withdraw.svg'; +import Update from '../../assets/icons/update.svg'; +import Warning from '../../assets/icons/warning.svg'; +import WysiwygBold from '../../assets/icons/wysiwyg-bold.svg'; +import WysiwygItalic from '../../assets/icons/wysiwyg-italic.svg'; +import WysiwygLinkSet from '../../assets/icons/wysiwyg-link-set.svg'; +import WysiwygLinkUnset from '../../assets/icons/wysiwyg-link-unset.svg'; +import WysiwygListOrdered from '../../assets/icons/wysiwyg-list-ordered.svg'; +import WysiwygListUnordered from '../../assets/icons/wysiwyg-list-unordered.svg'; +import { IconType } from './iconType'; + +type IconComponent = React.FC>; + +export const iconList: Record = { + [IconType.ADD]: Add, + [IconType.APP_COMMUNITY]: AppCommunity, + [IconType.APP_DASHBOARD]: AppDashboard, + [IconType.APP_FINANCE]: AppFinance, + [IconType.APP_GOVERNANCE]: AppGovernance, + [IconType.BLOCKCHAIN]: Blockchain, + [IconType.CALENDAR]: Calendar, + [IconType.CHECKBOX_DEFAULT]: CheckboxDefault, + [IconType.CHECKBOX_MULTI]: CheckboxMulti, + [IconType.CHECKBOX_SELECTED]: CheckboxSelected, + [IconType.CHECKMARK]: Checkmark, + [IconType.CHEVRON_DOWN]: ChevronDown, + [IconType.CHEVRON_LEFT]: ChevronLeft, + [IconType.CHEVRON_RIGHT]: ChevronRight, + [IconType.CHEVRON_UP]: ChevronUp, + [IconType.CLOCK]: Clock, + [IconType.CLOSE]: Close, + [IconType.COPY]: Copy, + [IconType.EXPAND]: Expand, + [IconType.EXPLORE]: Explore, + [IconType.FAVOURITE_DEFAULT]: FavouriteDefault, + [IconType.FAVOURITE_SELECTED]: FavouriteSelected, + [IconType.FEEDBACK]: Feedback, + [IconType.FILTER]: Filter, + [IconType.FLAG]: Flag, + [IconType.GAS_FEE]: GasFee, + [IconType.HOME]: Home, + [IconType.INFO]: Info, + [IconType.LINK_EXTERNAL]: LinkExternal, + [IconType.MENU_DEFAULT]: MenuDefault, + [IconType.MENU_HORIZONTAL]: MenuHorizontal, + [IconType.MENU_VERTICAL]: MenuVertical, + [IconType.PERSON]: Person, + [IconType.QUESTION]: Question, + [IconType.RADIO_CANCEL]: RadioCancel, + [IconType.RADIO_CHECK]: RadioCheck, + [IconType.RADIO_DEFAULT]: RadioDefault, + [IconType.RADIO_PAUSE]: RadioPause, + [IconType.RADIO_SELECTED]: RadioSelected, + [IconType.RELOAD]: Reload, + [IconType.SEARCH]: Search, + [IconType.SETTINGS]: Settings, + [IconType.SHRINK]: Shrink, + [IconType.SORT]: Sort, + [IconType.SWITCH]: Switch, + [IconType.TURN_OFF]: TurnOff, + [IconType.TX_DEPOSIT]: TxDeposit, + [IconType.TX_FAILURE]: TxFailure, + [IconType.TX_SMART_CONTRACT]: TxSmartContract, + [IconType.TX_WITHDRAW]: TxWithdraw, + [IconType.UPDATE]: Update, + [IconType.WARNING]: Warning, + [IconType.REMOVE]: Remove, + [IconType.WYSIWYG_BOLD]: WysiwygBold, + [IconType.WYSIWYG_ITALIC]: WysiwygItalic, + [IconType.WYSIWYG_LINK_SET]: WysiwygLinkSet, + [IconType.WYSIWYG_LINK_UNSET]: WysiwygLinkUnset, + [IconType.WYSIWYG_LIST_ORDERED]: WysiwygListOrdered, + [IconType.WYSIWYG_LIST_UNORDERED]: WysiwygListUnordered, +}; diff --git a/src/components/icon/iconType.ts b/src/components/icon/iconType.ts new file mode 100644 index 000000000..aaa9636be --- /dev/null +++ b/src/components/icon/iconType.ts @@ -0,0 +1,61 @@ +export enum IconType { + ADD = 'ADD', + APP_COMMUNITY = 'APP_COMMUNITY', + APP_DASHBOARD = 'APP_DASHBOARD', + APP_FINANCE = 'APP_FINANCE', + APP_GOVERNANCE = 'APP_GOVERNANCE', + BLOCKCHAIN = 'BLOCKCHAIN', + CALENDAR = 'CALENDAR', + CHECKBOX_DEFAULT = 'CHECKBOX_DEFAULT', + CHECKBOX_MULTI = 'CHECKBOX_MULTI', + CHECKBOX_SELECTED = 'CHECKBOX_SELECTED', + CHECKMARK = 'CHECKMARK', + CHEVRON_DOWN = 'CHEVRON_DOWN', + CHEVRON_LEFT = 'CHEVRON_LEFT', + CHEVRON_RIGHT = 'CHEVRON_RIGHT', + CHEVRON_UP = 'CHEVRON_UP', + CLOCK = 'CLOCK', + CLOSE = 'CLOSE', + COPY = 'COPY', + EXPAND = 'EXPAND', + EXPLORE = 'EXPLORE', + FAVOURITE_DEFAULT = 'FAVOURITE_DEFAULT', + FAVOURITE_SELECTED = 'FAVOURITE_SELECTED', + FEEDBACK = 'FEEDBACK', + FILTER = 'FILTER', + FLAG = 'FLAG', + GAS_FEE = 'GAS_FEE', + HOME = 'HOME', + INFO = 'INFO', + LINK_EXTERNAL = 'LINK_EXTERNAL', + MENU_DEFAULT = 'MENU_DEFAULT', + MENU_HORIZONTAL = 'MENU_HORIZONTAL', + MENU_VERTICAL = 'MENU_VERTICAL', + PERSON = 'PERSON', + QUESTION = 'QUESTION', + RADIO_CANCEL = 'RADIO_CANCEL', + RADIO_CHECK = 'RADIO_CHECK', + RADIO_DEFAULT = 'RADIO_DEFAULT', + RADIO_PAUSE = 'RADIO_PAUSE', + RADIO_SELECTED = 'RADIO_SELECTED', + RELOAD = 'RELOAD', + REMOVE = 'REMOVE', + SEARCH = 'SEARCH', + SETTINGS = 'SETTINGS', + SHRINK = 'SHRINK', + SORT = 'SORT', + SWITCH = 'SWITCH', + TURN_OFF = 'TURN_OFF', + TX_DEPOSIT = 'TX_DEPOSIT', + TX_FAILURE = 'TX_FAILURE', + TX_SMART_CONTRACT = 'TX_SMART_CONTRACT', + TX_WITHDRAW = 'TX_WITHDRAW', + UPDATE = 'UPDATE', + WARNING = 'WARNING', + WYSIWYG_BOLD = 'WYSIWYG_BOLD', + WYSIWYG_ITALIC = 'WYSIWYG_ITALIC', + WYSIWYG_LINK_SET = 'WYSIWYG_LINK_SET', + WYSIWYG_LINK_UNSET = 'WYSIWYG_LINK_UNSET', + WYSIWYG_LIST_ORDERED = 'WYSIWYG_LIST_ORDERED', + WYSIWYG_LIST_UNORDERED = 'WYSIWYG_LIST_UNORDERED', +} diff --git a/src/components/icon/index.ts b/src/components/icon/index.ts new file mode 100644 index 000000000..91a4e35ff --- /dev/null +++ b/src/components/icon/index.ts @@ -0,0 +1,2 @@ +export { Icon, type IIconProps, type IconSize } from './icon'; +export { IconType } from './iconType'; diff --git a/src/components/icons/icons.stories.tsx b/src/components/icons/icons.stories.tsx deleted file mode 100644 index 99c0bbd1f..000000000 --- a/src/components/icons/icons.stories.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import type { Meta, Story } from '@storybook/react'; -import React from 'react'; -import { styled } from 'styled-components'; -import * as interface_icons from './interface'; -import * as markdown_icons from './markdown'; -import * as module_icons from './module'; - -export default { - title: 'Components/Icons', - component: interface_icons.IconAdd, -} as Meta; - -const InterfaceList: Story = (args) => ( - - {Object.entries(interface_icons).map(([name, Icon]) => ( - - - {name} - - ))} - -); - -const ModuleList: Story = (args) => ( - - {Object.entries(module_icons).map(([name, Icon]) => ( - - - {name} - - ))} - -); - -const MarkdownList: Story = (args) => ( - - {Object.entries(markdown_icons).map(([name, Icon]) => ( - - - {name} - - ))} - -); - -export const Interface = InterfaceList.bind({}); -export const Module = ModuleList.bind({}); -export const Markdown = MarkdownList.bind({}); - -const IconListContainer = styled.div.attrs({ - className: 'flex flex-wrap grid grid-cols-4 gap-4', -})``; - -const IconContainer = styled.div.attrs({ - className: 'flex flex-col items-center justify-center p-2 border rounded', -})``; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx deleted file mode 100644 index 05b4dc651..000000000 --- a/src/components/icons/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export * from './interface'; -export * from './markdown'; -export * from './module'; - -export type IconType = ({ - height, - width, - ...props -}: { - // eslint-disable-next-line - [x: string]: any; - height?: number | undefined; - width?: number | undefined; -}) => JSX.Element; diff --git a/src/components/icons/interface/icon_add.tsx b/src/components/icons/interface/icon_add.tsx deleted file mode 100644 index e9f674d92..000000000 --- a/src/components/icons/interface/icon_add.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconAdd: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_block.tsx b/src/components/icons/interface/icon_block.tsx deleted file mode 100644 index b0b52d60a..000000000 --- a/src/components/icons/interface/icon_block.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconBlock: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_calendar.tsx b/src/components/icons/interface/icon_calendar.tsx deleted file mode 100644 index 0cdd33eff..000000000 --- a/src/components/icons/interface/icon_calendar.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCalendar: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_checkbox_default.tsx b/src/components/icons/interface/icon_checkbox_default.tsx deleted file mode 100644 index b94f15dc0..000000000 --- a/src/components/icons/interface/icon_checkbox_default.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCheckboxDefault: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_checkbox_multi.tsx b/src/components/icons/interface/icon_checkbox_multi.tsx deleted file mode 100644 index 718790c74..000000000 --- a/src/components/icons/interface/icon_checkbox_multi.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCheckboxMulti: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/icons/interface/icon_checkbox_selected.tsx b/src/components/icons/interface/icon_checkbox_selected.tsx deleted file mode 100644 index aaf29c3ea..000000000 --- a/src/components/icons/interface/icon_checkbox_selected.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCheckboxSelected: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_checkmark.tsx b/src/components/icons/interface/icon_checkmark.tsx deleted file mode 100644 index 9ddcd22e3..000000000 --- a/src/components/icons/interface/icon_checkmark.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCheckmark: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_chevron_down.tsx b/src/components/icons/interface/icon_chevron_down.tsx deleted file mode 100644 index f1b04cce2..000000000 --- a/src/components/icons/interface/icon_chevron_down.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconChevronDown: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_chevron_left.tsx b/src/components/icons/interface/icon_chevron_left.tsx deleted file mode 100644 index bac607b32..000000000 --- a/src/components/icons/interface/icon_chevron_left.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconChevronLeft: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_chevron_right.tsx b/src/components/icons/interface/icon_chevron_right.tsx deleted file mode 100644 index 89c352de1..000000000 --- a/src/components/icons/interface/icon_chevron_right.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconChevronRight: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_chevron_up.tsx b/src/components/icons/interface/icon_chevron_up.tsx deleted file mode 100644 index 7c51f046a..000000000 --- a/src/components/icons/interface/icon_chevron_up.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconChevronUp: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_clock.tsx b/src/components/icons/interface/icon_clock.tsx deleted file mode 100644 index c3b59b23c..000000000 --- a/src/components/icons/interface/icon_clock.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconClock: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_close.tsx b/src/components/icons/interface/icon_close.tsx deleted file mode 100644 index 1ce58330a..000000000 --- a/src/components/icons/interface/icon_close.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconClose: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_copy.tsx b/src/components/icons/interface/icon_copy.tsx deleted file mode 100644 index 2d94ca4bd..000000000 --- a/src/components/icons/interface/icon_copy.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCopy: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_deposit.tsx b/src/components/icons/interface/icon_deposit.tsx deleted file mode 100644 index 3a8c52325..000000000 --- a/src/components/icons/interface/icon_deposit.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconDeposit: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_expand.tsx b/src/components/icons/interface/icon_expand.tsx deleted file mode 100644 index 654bd5100..000000000 --- a/src/components/icons/interface/icon_expand.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconExpand: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_explore.tsx b/src/components/icons/interface/icon_explore.tsx deleted file mode 100644 index bcfce50c4..000000000 --- a/src/components/icons/interface/icon_explore.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconExplore: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_failure.tsx b/src/components/icons/interface/icon_failure.tsx deleted file mode 100644 index c548591c6..000000000 --- a/src/components/icons/interface/icon_failure.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFailure: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_favorite_default.tsx b/src/components/icons/interface/icon_favorite_default.tsx deleted file mode 100644 index 22ff0a4c7..000000000 --- a/src/components/icons/interface/icon_favorite_default.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFavoriteDefault: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_favorite_selected.tsx b/src/components/icons/interface/icon_favorite_selected.tsx deleted file mode 100644 index b3b135ba9..000000000 --- a/src/components/icons/interface/icon_favorite_selected.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFavoriteSelected: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_feedback.tsx b/src/components/icons/interface/icon_feedback.tsx deleted file mode 100644 index 920947ed4..000000000 --- a/src/components/icons/interface/icon_feedback.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFeedback: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_filter.tsx b/src/components/icons/interface/icon_filter.tsx deleted file mode 100644 index 7aa3eb1df..000000000 --- a/src/components/icons/interface/icon_filter.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFilter: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_flag.tsx b/src/components/icons/interface/icon_flag.tsx deleted file mode 100644 index 56715da1f..000000000 --- a/src/components/icons/interface/icon_flag.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFlag: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_home.tsx b/src/components/icons/interface/icon_home.tsx deleted file mode 100644 index c49aca205..000000000 --- a/src/components/icons/interface/icon_home.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconHome: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_info.tsx b/src/components/icons/interface/icon_info.tsx deleted file mode 100644 index 747120cde..000000000 --- a/src/components/icons/interface/icon_info.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconInfo: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_link_external.tsx b/src/components/icons/interface/icon_link_external.tsx deleted file mode 100644 index 09e03aac4..000000000 --- a/src/components/icons/interface/icon_link_external.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconLinkExternal: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_menu.tsx b/src/components/icons/interface/icon_menu.tsx deleted file mode 100644 index 7356d3c9c..000000000 --- a/src/components/icons/interface/icon_menu.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconMenu: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/icons/interface/icon_menu_vertical.tsx b/src/components/icons/interface/icon_menu_vertical.tsx deleted file mode 100644 index 39dc36163..000000000 --- a/src/components/icons/interface/icon_menu_vertical.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconMenuVertical: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_person.tsx b/src/components/icons/interface/icon_person.tsx deleted file mode 100644 index d215c3b00..000000000 --- a/src/components/icons/interface/icon_person.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconPerson: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_question.tsx b/src/components/icons/interface/icon_question.tsx deleted file mode 100644 index bdb5dd6a5..000000000 --- a/src/components/icons/interface/icon_question.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconQuestion: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_radio_default.tsx b/src/components/icons/interface/icon_radio_default.tsx deleted file mode 100644 index 044835020..000000000 --- a/src/components/icons/interface/icon_radio_default.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconRadioDefault: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_radio_multi.tsx b/src/components/icons/interface/icon_radio_multi.tsx deleted file mode 100644 index 25d195fea..000000000 --- a/src/components/icons/interface/icon_radio_multi.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconRadioMulti: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_radio_pause.tsx b/src/components/icons/interface/icon_radio_pause.tsx deleted file mode 100644 index 888ff02fa..000000000 --- a/src/components/icons/interface/icon_radio_pause.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconRadioPause: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_radio_selected.tsx b/src/components/icons/interface/icon_radio_selected.tsx deleted file mode 100644 index 375c95842..000000000 --- a/src/components/icons/interface/icon_radio_selected.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconRadioSelected: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/icons/interface/icon_reload.tsx b/src/components/icons/interface/icon_reload.tsx deleted file mode 100644 index 879dfa21b..000000000 --- a/src/components/icons/interface/icon_reload.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconReload: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_remove.tsx b/src/components/icons/interface/icon_remove.tsx deleted file mode 100644 index 6292effa0..000000000 --- a/src/components/icons/interface/icon_remove.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconRemove: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_search.tsx b/src/components/icons/interface/icon_search.tsx deleted file mode 100644 index 36244f3b7..000000000 --- a/src/components/icons/interface/icon_search.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSearch: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_settings.tsx b/src/components/icons/interface/icon_settings.tsx deleted file mode 100644 index e951a8d08..000000000 --- a/src/components/icons/interface/icon_settings.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSettings: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_shrink.tsx b/src/components/icons/interface/icon_shrink.tsx deleted file mode 100644 index 9aff2e0b2..000000000 --- a/src/components/icons/interface/icon_shrink.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconShrink: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_smart_contract.tsx b/src/components/icons/interface/icon_smart_contract.tsx deleted file mode 100644 index 38e7e749d..000000000 --- a/src/components/icons/interface/icon_smart_contract.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSmartContract: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_sort.tsx b/src/components/icons/interface/icon_sort.tsx deleted file mode 100644 index 074c2178a..000000000 --- a/src/components/icons/interface/icon_sort.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSort: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_spinner.tsx b/src/components/icons/interface/icon_spinner.tsx deleted file mode 100644 index bbf8bcd32..000000000 --- a/src/components/icons/interface/icon_spinner.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSpinner: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_storage.tsx b/src/components/icons/interface/icon_storage.tsx deleted file mode 100644 index 0541c8b3f..000000000 --- a/src/components/icons/interface/icon_storage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconStorage: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/icons/interface/icon_success.tsx b/src/components/icons/interface/icon_success.tsx deleted file mode 100644 index 5b72fcd06..000000000 --- a/src/components/icons/interface/icon_success.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSuccess: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_switch.tsx b/src/components/icons/interface/icon_switch.tsx deleted file mode 100644 index 128c96bed..000000000 --- a/src/components/icons/interface/icon_switch.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconSwitch: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_turn_off.tsx b/src/components/icons/interface/icon_turn_off.tsx deleted file mode 100644 index 9ea2a4f34..000000000 --- a/src/components/icons/interface/icon_turn_off.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconTurnOff: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_update.tsx b/src/components/icons/interface/icon_update.tsx deleted file mode 100644 index 5a185f860..000000000 --- a/src/components/icons/interface/icon_update.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconUpdate: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_warning.tsx b/src/components/icons/interface/icon_warning.tsx deleted file mode 100644 index b6ef24ebd..000000000 --- a/src/components/icons/interface/icon_warning.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconWarning: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/icon_withdraw.tsx b/src/components/icons/interface/icon_withdraw.tsx deleted file mode 100644 index 95f9d2886..000000000 --- a/src/components/icons/interface/icon_withdraw.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconWithdraw: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/interface/index.ts b/src/components/icons/interface/index.ts deleted file mode 100644 index e72149195..000000000 --- a/src/components/icons/interface/index.ts +++ /dev/null @@ -1,50 +0,0 @@ -export { IconAdd } from './icon_add'; -export { IconBlock } from './icon_block'; -export { IconCalendar } from './icon_calendar'; -export { IconCheckboxDefault } from './icon_checkbox_default'; -export { IconCheckboxMulti } from './icon_checkbox_multi'; -export { IconCheckboxSelected } from './icon_checkbox_selected'; -export { IconCheckmark } from './icon_checkmark'; -export { IconChevronDown } from './icon_chevron_down'; -export { IconChevronLeft } from './icon_chevron_left'; -export { IconChevronRight } from './icon_chevron_right'; -export { IconChevronUp } from './icon_chevron_up'; -export { IconClock } from './icon_clock'; -export { IconClose } from './icon_close'; -export { IconCopy } from './icon_copy'; -export { IconDeposit } from './icon_deposit'; -export { IconExpand } from './icon_expand'; -export { IconExplore } from './icon_explore'; -export { IconFailure } from './icon_failure'; -export { IconFavoriteDefault } from './icon_favorite_default'; -export { IconFavoriteSelected } from './icon_favorite_selected'; -export { IconFeedback } from './icon_feedback'; -export { IconFilter } from './icon_filter'; -export { IconFlag } from './icon_flag'; -export { IconHome } from './icon_home'; -export { IconInfo } from './icon_info'; -export { IconLinkExternal } from './icon_link_external'; -export { IconMenu } from './icon_menu'; -export { IconMenuVertical } from './icon_menu_vertical'; -export { IconPerson } from './icon_person'; -export { IconQuestion } from './icon_question'; -export { IconRadioDefault } from './icon_radio_default'; -export { IconRadioMulti } from './icon_radio_multi'; -export { IconRadioPause } from './icon_radio_pause'; -export { IconRadioSelected } from './icon_radio_selected'; -export { IconReload } from './icon_reload'; -export { IconRemove } from './icon_remove'; -export { IconSearch } from './icon_search'; -export { IconSettings } from './icon_settings'; -export { IconShrink } from './icon_shrink'; -export { IconSmartContract } from './icon_smart_contract'; -export { IconSort } from './icon_sort'; -export { IconSpinner } from './icon_spinner'; -export { IconStorage } from './icon_storage'; -export { IconSuccess } from './icon_success'; -export { IconSwitch } from './icon_switch'; -export { IconTurnOff } from './icon_turn_off'; -export { IconUpdate } from './icon_update'; -export { IconWarning } from './icon_warning'; -export { IconWithdraw } from './icon_withdraw'; -export { IconRadioCancel } from './radio'; diff --git a/src/components/icons/interface/radio/cancel.tsx b/src/components/icons/interface/radio/cancel.tsx deleted file mode 100644 index 7c4b546f1..000000000 --- a/src/components/icons/interface/radio/cancel.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../..'; - -export const IconRadioCancel: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/interface/radio/index.ts b/src/components/icons/interface/radio/index.ts deleted file mode 100644 index e8ee78d32..000000000 --- a/src/components/icons/interface/radio/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './cancel'; diff --git a/src/components/icons/markdown/icon_bold.tsx b/src/components/icons/markdown/icon_bold.tsx deleted file mode 100644 index d94370aa3..000000000 --- a/src/components/icons/markdown/icon_bold.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconBold: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/icons/markdown/icon_italic.tsx b/src/components/icons/markdown/icon_italic.tsx deleted file mode 100644 index efebfc9aa..000000000 --- a/src/components/icons/markdown/icon_italic.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconItalic: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/markdown/icon_link_set.tsx b/src/components/icons/markdown/icon_link_set.tsx deleted file mode 100644 index 56ca7e5d3..000000000 --- a/src/components/icons/markdown/icon_link_set.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconLinkSet: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/markdown/icon_link_unset.tsx b/src/components/icons/markdown/icon_link_unset.tsx deleted file mode 100644 index 902904c83..000000000 --- a/src/components/icons/markdown/icon_link_unset.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconLinkUnset: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/markdown/icon_list_ordered.tsx b/src/components/icons/markdown/icon_list_ordered.tsx deleted file mode 100644 index 916a4bcbd..000000000 --- a/src/components/icons/markdown/icon_list_ordered.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconListOrdered: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/markdown/icon_list_unordered.tsx b/src/components/icons/markdown/icon_list_unordered.tsx deleted file mode 100644 index 8e540f574..000000000 --- a/src/components/icons/markdown/icon_list_unordered.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconListUnordered: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/markdown/index.ts b/src/components/icons/markdown/index.ts deleted file mode 100644 index c8285cbf1..000000000 --- a/src/components/icons/markdown/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './icon_bold'; -export * from './icon_italic'; -export * from './icon_link_set'; -export * from './icon_link_unset'; -export * from './icon_list_ordered'; -export * from './icon_list_unordered'; diff --git a/src/components/icons/module/icon_community.tsx b/src/components/icons/module/icon_community.tsx deleted file mode 100644 index 66090374b..000000000 --- a/src/components/icons/module/icon_community.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconCommunity: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/icons/module/icon_dashboard.tsx b/src/components/icons/module/icon_dashboard.tsx deleted file mode 100644 index 4f11097f3..000000000 --- a/src/components/icons/module/icon_dashboard.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconDashboard: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/icons/module/icon_finance.tsx b/src/components/icons/module/icon_finance.tsx deleted file mode 100644 index c3a3a1987..000000000 --- a/src/components/icons/module/icon_finance.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconFinance: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/icons/module/icon_governance.tsx b/src/components/icons/module/icon_governance.tsx deleted file mode 100644 index 86c83016e..000000000 --- a/src/components/icons/module/icon_governance.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { type IconType } from '..'; - -export const IconGovernance: IconType = ({ height = 16, width = 16, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/icons/module/index.ts b/src/components/icons/module/index.ts deleted file mode 100644 index fc584b3ad..000000000 --- a/src/components/icons/module/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { IconCommunity } from './icon_community'; -export { IconDashboard } from './icon_dashboard'; -export { IconFinance } from './icon_finance'; -export { IconGovernance } from './icon_governance'; diff --git a/src/components/illustrations/human/human_accessories/buddha.tsx b/src/components/illustrations/human/human_accessories/buddha.tsx deleted file mode 100644 index 53332508b..000000000 --- a/src/components/illustrations/human/human_accessories/buddha.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Buddha: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/earrings_circle.tsx b/src/components/illustrations/human/human_accessories/earrings_circle.tsx deleted file mode 100644 index 4983677aa..000000000 --- a/src/components/illustrations/human/human_accessories/earrings_circle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const EarringsCircle: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/earrings_hoops.tsx b/src/components/illustrations/human/human_accessories/earrings_hoops.tsx deleted file mode 100644 index 70e8dd50d..000000000 --- a/src/components/illustrations/human/human_accessories/earrings_hoops.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const EarringsHoops: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/earrings_rhombus.tsx b/src/components/illustrations/human/human_accessories/earrings_rhombus.tsx deleted file mode 100644 index e026c6391..000000000 --- a/src/components/illustrations/human/human_accessories/earrings_rhombus.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const EarringsRhombus: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/earrings_skull.tsx b/src/components/illustrations/human/human_accessories/earrings_skull.tsx deleted file mode 100644 index 4e19f495c..000000000 --- a/src/components/illustrations/human/human_accessories/earrings_skull.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const EarringsSkull: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/earrings_thunder.tsx b/src/components/illustrations/human/human_accessories/earrings_thunder.tsx deleted file mode 100644 index 9bd0f792a..000000000 --- a/src/components/illustrations/human/human_accessories/earrings_thunder.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const EarringsThunder: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/expression.tsx b/src/components/illustrations/human/human_accessories/expression.tsx deleted file mode 100644 index 1c8275a4e..000000000 --- a/src/components/illustrations/human/human_accessories/expression.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Expression: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/flushed.tsx b/src/components/illustrations/human/human_accessories/flushed.tsx deleted file mode 100644 index f094d05fc..000000000 --- a/src/components/illustrations/human/human_accessories/flushed.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Flushed: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/head_flower.tsx b/src/components/illustrations/human/human_accessories/head_flower.tsx deleted file mode 100644 index 6125e0452..000000000 --- a/src/components/illustrations/human/human_accessories/head_flower.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const HeadFlower: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/index.tsx b/src/components/illustrations/human/human_accessories/index.tsx deleted file mode 100644 index 17c9de349..000000000 --- a/src/components/illustrations/human/human_accessories/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; - -import { - UnknownIllustrationVariantError, - type IllustrationComponentProps, - type Noneable, -} from '../../../../utils/illustrations'; -import { Buddha } from './buddha'; -import { EarringsCircle } from './earrings_circle'; -import { EarringsHoops } from './earrings_hoops'; -import { EarringsRhombus } from './earrings_rhombus'; -import { EarringsSkull } from './earrings_skull'; -import { EarringsThunder } from './earrings_thunder'; -import { Expression } from './expression'; -import { Flushed } from './flushed'; -import { HeadFlower } from './head_flower'; -import { Piercings } from './piercings'; -import { PiercingsTattoo } from './piercings_tattoo'; - -export type Accessory = Noneable< - | 'buddha' - | 'earrings_circle' - | 'earrings_hoops' - | 'earrings_rhombus' - | 'earrings_skull' - | 'earrings_thunder' - | 'expression' - | 'flushed' - | 'head_flower' - | 'piercings_tattoo' - | 'piercings' ->; - -export const IllustrationAccessory: React.FC> = ({ variant, ...rest }) => { - switch (variant) { - case 'buddha': - return ; - case 'earrings_circle': - return ; - case 'earrings_hoops': - return ; - case 'earrings_rhombus': - return ; - case 'earrings_skull': - return ; - case 'earrings_thunder': - return ; - case 'expression': - return ; - case 'flushed': - return ; - case 'head_flower': - return ; - case 'piercings': - return ; - case 'piercings_tattoo': - return ; - case 'none': - return null; - default: - throw new UnknownIllustrationVariantError(variant, 'accessory'); - } -}; diff --git a/src/components/illustrations/human/human_accessories/piercings.tsx b/src/components/illustrations/human/human_accessories/piercings.tsx deleted file mode 100644 index c17cc4846..000000000 --- a/src/components/illustrations/human/human_accessories/piercings.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Piercings: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_accessories/piercings_tattoo.tsx b/src/components/illustrations/human/human_accessories/piercings_tattoo.tsx deleted file mode 100644 index 4683240e3..000000000 --- a/src/components/illustrations/human/human_accessories/piercings_tattoo.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const PiercingsTattoo: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/aragon.tsx b/src/components/illustrations/human/human_bodies/aragon.tsx deleted file mode 100644 index b43740f81..000000000 --- a/src/components/illustrations/human/human_bodies/aragon.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Aragon: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/blocks.tsx b/src/components/illustrations/human/human_bodies/blocks.tsx deleted file mode 100644 index 22412b46f..000000000 --- a/src/components/illustrations/human/human_bodies/blocks.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Blocks: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/chart.tsx b/src/components/illustrations/human/human_bodies/chart.tsx deleted file mode 100644 index c5a598789..000000000 --- a/src/components/illustrations/human/human_bodies/chart.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Chart: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/computer.tsx b/src/components/illustrations/human/human_bodies/computer.tsx deleted file mode 100644 index 3e0cce42f..000000000 --- a/src/components/illustrations/human/human_bodies/computer.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Computer: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/computer_correct.tsx b/src/components/illustrations/human/human_bodies/computer_correct.tsx deleted file mode 100644 index 9a79c265b..000000000 --- a/src/components/illustrations/human/human_bodies/computer_correct.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const ComputerCorrect: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/correct.tsx b/src/components/illustrations/human/human_bodies/correct.tsx deleted file mode 100644 index c4131143d..000000000 --- a/src/components/illustrations/human/human_bodies/correct.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Correct: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/double_correct.tsx b/src/components/illustrations/human/human_bodies/double_correct.tsx deleted file mode 100644 index 2ea176c6d..000000000 --- a/src/components/illustrations/human/human_bodies/double_correct.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const DoubleCorrect: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/elevating.tsx b/src/components/illustrations/human/human_bodies/elevating.tsx deleted file mode 100644 index e766688e9..000000000 --- a/src/components/illustrations/human/human_bodies/elevating.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Elevating: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/index.tsx b/src/components/illustrations/human/human_bodies/index.tsx deleted file mode 100644 index 4f9de977e..000000000 --- a/src/components/illustrations/human/human_bodies/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { UnknownIllustrationVariantError, type IllustrationComponentProps } from '../../../../utils/illustrations'; -import { Aragon } from './aragon'; -import { Blocks } from './blocks'; -import { Chart } from './chart'; -import { Computer } from './computer'; -import { ComputerCorrect } from './computer_correct'; -import { Correct } from './correct'; -import { DoubleCorrect } from './double_correct'; -import { Elevating } from './elevating'; -import { Relaxed } from './relaxed'; -import { SendingLove } from './sending_love'; -import { Voting } from './voting'; - -export type Body = - | 'relaxed' - | 'aragon' - | 'blocks' - | 'chart' - | 'computer_correct' - | 'computer' - | 'correct' - | 'double_correct' - | 'elevating' - | 'sending_love' - | 'voting'; - -export const IllustrationBodies: React.FC> = ({ variant, ...rest }) => { - switch (variant) { - case 'aragon': - return ; - case 'blocks': - return ; - case 'chart': - return ; - case 'computer': - return ; - case 'computer_correct': - return ; - case 'correct': - return ; - case 'double_correct': - return ; - case 'elevating': - return ; - case 'relaxed': - return ; - case 'sending_love': - return ; - case 'voting': - return ; - default: - throw new UnknownIllustrationVariantError(variant, 'body'); - } -}; diff --git a/src/components/illustrations/human/human_bodies/relaxed.tsx b/src/components/illustrations/human/human_bodies/relaxed.tsx deleted file mode 100644 index a7b00d979..000000000 --- a/src/components/illustrations/human/human_bodies/relaxed.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Relaxed: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/sending_love.tsx b/src/components/illustrations/human/human_bodies/sending_love.tsx deleted file mode 100644 index 2ac8db6c2..000000000 --- a/src/components/illustrations/human/human_bodies/sending_love.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SendingLove: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_bodies/voting.tsx b/src/components/illustrations/human/human_bodies/voting.tsx deleted file mode 100644 index 2c681808f..000000000 --- a/src/components/illustrations/human/human_bodies/voting.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Voting: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/angry.tsx b/src/components/illustrations/human/human_expressions/angry.tsx deleted file mode 100644 index 2663cf8fd..000000000 --- a/src/components/illustrations/human/human_expressions/angry.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Angry: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/casual.tsx b/src/components/illustrations/human/human_expressions/casual.tsx deleted file mode 100644 index 04652aee8..000000000 --- a/src/components/illustrations/human/human_expressions/casual.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Casual: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/crying.tsx b/src/components/illustrations/human/human_expressions/crying.tsx deleted file mode 100644 index 69b308f7f..000000000 --- a/src/components/illustrations/human/human_expressions/crying.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Crying: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/decided.tsx b/src/components/illustrations/human/human_expressions/decided.tsx deleted file mode 100644 index 1eeffe0fa..000000000 --- a/src/components/illustrations/human/human_expressions/decided.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Decided: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/excited.tsx b/src/components/illustrations/human/human_expressions/excited.tsx deleted file mode 100644 index a08d41370..000000000 --- a/src/components/illustrations/human/human_expressions/excited.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Excited: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/index.tsx b/src/components/illustrations/human/human_expressions/index.tsx deleted file mode 100644 index 6ec2fdca8..000000000 --- a/src/components/illustrations/human/human_expressions/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { UnknownIllustrationVariantError, type IllustrationComponentProps } from '../../../../utils/illustrations'; -import { Angry } from './angry'; -import { Casual } from './casual'; -import { Crying } from './crying'; -import { Decided } from './decided'; -import { Excited } from './excited'; -import { SadLeft } from './sad_left'; -import { SadRight } from './sad_right'; -import { Smile } from './smile'; -import { SmileWink } from './smile_wink'; -import { Surprised } from './surprised'; -import { Suspecting } from './suspecting'; - -export type Expression = - | 'angry' - | 'casual' - | 'crying' - | 'decided' - | 'excited' - | 'sad_left' - | 'sad_right' - | 'smile_wink' - | 'smile' - | 'surprised' - | 'suspecting'; - -export const IllustrationExpression: React.FC> = ({ variant, ...rest }) => { - switch (variant) { - case 'angry': - return ; - case 'casual': - return ; - case 'crying': - return ; - case 'decided': - return ; - case 'excited': - return ; - case 'sad_left': - return ; - case 'sad_right': - return ; - case 'smile': - return ; - case 'smile_wink': - return ; - case 'surprised': - return ; - case 'suspecting': - return ; - default: - throw new UnknownIllustrationVariantError(variant, 'expression'); - } -}; diff --git a/src/components/illustrations/human/human_expressions/sad_left.tsx b/src/components/illustrations/human/human_expressions/sad_left.tsx deleted file mode 100644 index e6e1769e5..000000000 --- a/src/components/illustrations/human/human_expressions/sad_left.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SadLeft: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/sad_right.tsx b/src/components/illustrations/human/human_expressions/sad_right.tsx deleted file mode 100644 index db6433d29..000000000 --- a/src/components/illustrations/human/human_expressions/sad_right.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SadRight: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/smile.tsx b/src/components/illustrations/human/human_expressions/smile.tsx deleted file mode 100644 index 1dbf817b4..000000000 --- a/src/components/illustrations/human/human_expressions/smile.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Smile: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/smile_wink.tsx b/src/components/illustrations/human/human_expressions/smile_wink.tsx deleted file mode 100644 index 443a120fa..000000000 --- a/src/components/illustrations/human/human_expressions/smile_wink.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SmileWink: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/surprised.tsx b/src/components/illustrations/human/human_expressions/surprised.tsx deleted file mode 100644 index e6895c9dd..000000000 --- a/src/components/illustrations/human/human_expressions/surprised.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Surprised: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_expressions/suspecting.tsx b/src/components/illustrations/human/human_expressions/suspecting.tsx deleted file mode 100644 index 31d21a084..000000000 --- a/src/components/illustrations/human/human_expressions/suspecting.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Suspecting: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/afro.tsx b/src/components/illustrations/human/human_hairs/afro.tsx deleted file mode 100644 index ac5c6065e..000000000 --- a/src/components/illustrations/human/human_hairs/afro.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Afro: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/bald.tsx b/src/components/illustrations/human/human_hairs/bald.tsx deleted file mode 100644 index 9dec3dedc..000000000 --- a/src/components/illustrations/human/human_hairs/bald.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Bald: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/bun.tsx b/src/components/illustrations/human/human_hairs/bun.tsx deleted file mode 100644 index 583f7d89a..000000000 --- a/src/components/illustrations/human/human_hairs/bun.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Bun: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/cool.tsx b/src/components/illustrations/human/human_hairs/cool.tsx deleted file mode 100644 index 25f06bfd6..000000000 --- a/src/components/illustrations/human/human_hairs/cool.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Cool: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/curly.tsx b/src/components/illustrations/human/human_hairs/curly.tsx deleted file mode 100644 index 6394de5fe..000000000 --- a/src/components/illustrations/human/human_hairs/curly.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Curly: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/curly_bangs.tsx b/src/components/illustrations/human/human_hairs/curly_bangs.tsx deleted file mode 100644 index 74a2c022d..000000000 --- a/src/components/illustrations/human/human_hairs/curly_bangs.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const CurlyBangs: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/index.tsx b/src/components/illustrations/human/human_hairs/index.tsx deleted file mode 100644 index 95c5aceaf..000000000 --- a/src/components/illustrations/human/human_hairs/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; - -import { - UnknownIllustrationVariantError, - type IllustrationComponentProps, - type Noneable, -} from '../../../../utils/illustrations'; -import { Afro } from './afro'; -import { Bald } from './bald'; -import { Bun } from './bun'; -import { Cool } from './cool'; -import { Curly } from './curly'; -import { CurlyBangs } from './curly_bangs'; -import { Informal } from './informal'; -import { Long } from './long'; -import { Middle } from './middle'; -import { Oldschool } from './oldschool'; -import { Punk } from './punk'; -import { Short } from './short'; - -export type Hair = Noneable< - | 'long' - | 'afro' - | 'bald' - | 'bun' - | 'cool' - | 'curly_bangs' - | 'curly' - | 'informal' - | 'middle' - | 'oldschool' - | 'punk' - | 'short' ->; - -export const IllustrationHair: React.FC> = ({ variant, ...rest }) => { - switch (variant) { - case 'afro': - return ; - case 'bald': - return ; - case 'bun': - return ; - case 'cool': - return ; - case 'curly': - return ; - case 'curly_bangs': - return ; - case 'informal': - return ; - case 'long': - return ; - case 'middle': - return ; - case 'oldschool': - return ; - case 'punk': - return ; - case 'short': - return ; - case 'none': - return null; - default: - throw new UnknownIllustrationVariantError(variant, 'hair'); - } -}; diff --git a/src/components/illustrations/human/human_hairs/informal.tsx b/src/components/illustrations/human/human_hairs/informal.tsx deleted file mode 100644 index 32a87cecf..000000000 --- a/src/components/illustrations/human/human_hairs/informal.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Informal: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/long.tsx b/src/components/illustrations/human/human_hairs/long.tsx deleted file mode 100644 index 038319606..000000000 --- a/src/components/illustrations/human/human_hairs/long.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Long: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/middle.tsx b/src/components/illustrations/human/human_hairs/middle.tsx deleted file mode 100644 index 3c5fde7d5..000000000 --- a/src/components/illustrations/human/human_hairs/middle.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Middle: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/oldschool.tsx b/src/components/illustrations/human/human_hairs/oldschool.tsx deleted file mode 100644 index 69ae30719..000000000 --- a/src/components/illustrations/human/human_hairs/oldschool.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Oldschool: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/punk.tsx b/src/components/illustrations/human/human_hairs/punk.tsx deleted file mode 100644 index 5468f9f8b..000000000 --- a/src/components/illustrations/human/human_hairs/punk.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Punk: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_hairs/short.tsx b/src/components/illustrations/human/human_hairs/short.tsx deleted file mode 100644 index 85257130d..000000000 --- a/src/components/illustrations/human/human_hairs/short.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Short: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/big_rounded.tsx b/src/components/illustrations/human/human_sunglasses/big_rounded.tsx deleted file mode 100644 index fd9e3c9ad..000000000 --- a/src/components/illustrations/human/human_sunglasses/big_rounded.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const BigRounded: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/big_semirounded.tsx b/src/components/illustrations/human/human_sunglasses/big_semirounded.tsx deleted file mode 100644 index efdd8e7f0..000000000 --- a/src/components/illustrations/human/human_sunglasses/big_semirounded.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const BigSemirounded: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/index.tsx b/src/components/illustrations/human/human_sunglasses/index.tsx deleted file mode 100644 index ceec3bf9d..000000000 --- a/src/components/illustrations/human/human_sunglasses/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; - -import { - UnknownIllustrationVariantError, - type IllustrationComponentProps, - type Noneable, -} from '../../../../utils/illustrations'; -import { BigRounded } from './big_rounded'; -import { BigSemirounded } from './big_semirounded'; -import { LargeStylized } from './large_stylized'; -import { LargeStylizedXl } from './large_stylized_xl'; -import { Pirate } from './pirate'; -import { SmallIntellectual } from './small_intellectual'; -import { SmallSympathetic } from './small_sympathetic'; -import { SmallWeirdOne } from './small_weird_one'; -import { SmallWeirdTwo } from './small_weird_two'; -import { Thuglife } from './thuglife'; -import { ThuglifeRounded } from './thuglife_rounded'; - -export type Sunglass = Noneable< - | 'big_rounded' - | 'big_semirounded' - | 'large_stylized_xl' - | 'large_stylized' - | 'pirate' - | 'small_intellectual' - | 'small_sympathetic' - | 'small_weird_one' - | 'small_weird_two' - | 'thuglife_rounded' - | 'thuglife' ->; - -export const IllustrationSunglass: React.FC> = ({ variant, ...rest }) => { - switch (variant) { - case 'big_rounded': - return ; - case 'big_semirounded': - return ; - case 'large_stylized': - return ; - case 'large_stylized_xl': - return ; - case 'pirate': - return ; - case 'small_intellectual': - return ; - case 'small_sympathetic': - return ; - case 'small_weird_one': - return ; - case 'small_weird_two': - return ; - case 'thuglife': - return ; - case 'thuglife_rounded': - return ; - case 'none': - return null; - default: - throw new UnknownIllustrationVariantError(variant, 'sunglasses'); - } -}; diff --git a/src/components/illustrations/human/human_sunglasses/large_stylized.tsx b/src/components/illustrations/human/human_sunglasses/large_stylized.tsx deleted file mode 100644 index c12c2ccc1..000000000 --- a/src/components/illustrations/human/human_sunglasses/large_stylized.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const LargeStylized: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/large_stylized_xl.tsx b/src/components/illustrations/human/human_sunglasses/large_stylized_xl.tsx deleted file mode 100644 index d6a268ce7..000000000 --- a/src/components/illustrations/human/human_sunglasses/large_stylized_xl.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const LargeStylizedXl: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/pirate.tsx b/src/components/illustrations/human/human_sunglasses/pirate.tsx deleted file mode 100644 index bd31db6f7..000000000 --- a/src/components/illustrations/human/human_sunglasses/pirate.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Pirate: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/small_intellectual.tsx b/src/components/illustrations/human/human_sunglasses/small_intellectual.tsx deleted file mode 100644 index a27d5807e..000000000 --- a/src/components/illustrations/human/human_sunglasses/small_intellectual.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SmallIntellectual: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/small_sympathetic.tsx b/src/components/illustrations/human/human_sunglasses/small_sympathetic.tsx deleted file mode 100644 index e51a8a38c..000000000 --- a/src/components/illustrations/human/human_sunglasses/small_sympathetic.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SmallSympathetic: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/small_weird_one.tsx b/src/components/illustrations/human/human_sunglasses/small_weird_one.tsx deleted file mode 100644 index 19f69fa41..000000000 --- a/src/components/illustrations/human/human_sunglasses/small_weird_one.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SmallWeirdOne: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/small_weird_two.tsx b/src/components/illustrations/human/human_sunglasses/small_weird_two.tsx deleted file mode 100644 index a7c0142a5..000000000 --- a/src/components/illustrations/human/human_sunglasses/small_weird_two.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const SmallWeirdTwo: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/thuglife.tsx b/src/components/illustrations/human/human_sunglasses/thuglife.tsx deleted file mode 100644 index eba5968f8..000000000 --- a/src/components/illustrations/human/human_sunglasses/thuglife.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const Thuglife: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/human_sunglasses/thuglife_rounded.tsx b/src/components/illustrations/human/human_sunglasses/thuglife_rounded.tsx deleted file mode 100644 index 5269240fe..000000000 --- a/src/components/illustrations/human/human_sunglasses/thuglife_rounded.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../../icons'; - -export const ThuglifeRounded: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/human/illuHuman.stories.tsx b/src/components/illustrations/human/illuHuman.stories.tsx deleted file mode 100644 index 176758388..000000000 --- a/src/components/illustrations/human/illuHuman.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IllustrationHuman, type IlluHumanProps } from './illuHuman'; - -export default { - title: 'Components/Illustration/Human', - component: IllustrationHuman, -} as Meta; - -const Template: Story = (args) => ( -
- -
-); -export const Default = Template.bind({}); -Default.args = { - body: 'chart', - expression: 'casual', - width: 800, - height: 450, -}; diff --git a/src/components/illustrations/human/illuHuman.test.tsx b/src/components/illustrations/human/illuHuman.test.tsx deleted file mode 100644 index f412d9835..000000000 --- a/src/components/illustrations/human/illuHuman.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { IllustrationHuman } from './illuHuman'; - -describe('IlluHuman', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('illu-human'); - } - - test('should render without crashing', () => { - const element = setup({ - body: 'chart', - expression: 'casual', - hair: 'long', - sunglass: 'big_rounded', - accessory: 'earrings_circle', - width: 800, - height: 450, - }); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/illustrations/human/illuHuman.tsx b/src/components/illustrations/human/illuHuman.tsx deleted file mode 100644 index e0a50593b..000000000 --- a/src/components/illustrations/human/illuHuman.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { type Dimensions } from '../../../utils/illustrations'; - -import { IllustrationAccessory, type Accessory } from './human_accessories'; -import { IllustrationBodies, type Body } from './human_bodies'; -import { IllustrationExpression, type Expression } from './human_expressions'; -import { IllustrationHair, type Hair } from './human_hairs'; -import { IllustrationSunglass, type Sunglass } from './human_sunglasses'; - -export type IlluHumanProps = { - /** - * The variant of human body used as for the Illustration - */ - body: Body; - /** - * The variant of facial expression used as for the Illustration - */ - expression: Expression; - /** - * The variant of hair style used as for the Illustration. This is prop is - * optional. If not specified, no hair will be shown. - */ - hair?: Hair; - /** - * The variant of glasses used as for the Illustration. This is prop is - * optional. If not specified, no glasses will be shown. - */ - sunglass?: Sunglass; - /** - * The variant of accessory used as for the Illustration. This is prop is - * optional. If not specified, no accessories will be shown. - */ - accessory?: Accessory; -} & Dimensions; - -export const IllustrationHuman: React.FC = ({ - body, - expression, - hair = 'none', - sunglass = 'none', - accessory = 'none', - ...rest -}) => { - return ( -
- - - - - - - - - - - - - - - -
- ); -}; - -const Item = styled.div.attrs({ - className: 'absolute', -})``; diff --git a/src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx b/src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx new file mode 100644 index 000000000..fb7705819 --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHuman.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { IllustrationHuman } from './illustrationHuman'; + +const meta: Meta = { + title: 'components/Illustrations/IllustrationHuman', + component: IllustrationHuman, + tags: ['autodocs'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=8874-14281&mode=dev', + }, + }, +}; + +type Story = StoryObj; + +/** + * Default usage example of the IllustrationObject component. + */ +export const Default: Story = { + args: { + body: 'ARAGON', + expression: 'SMILE_WINK', + }, +}; + +export default meta; diff --git a/src/components/illustrations/illustrationHuman/illustrationHuman.test.tsx b/src/components/illustrations/illustrationHuman/illustrationHuman.test.tsx new file mode 100644 index 000000000..7682460a8 --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHuman.test.tsx @@ -0,0 +1,46 @@ +import { render, screen } from '@testing-library/react'; +import { IllustrationHuman, type IIllustrationHumanProps } from './illustrationHuman'; + +describe(' component', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IIllustrationHumanProps = { + body: 'ARAGON', + expression: 'ANGRY', + ...props, + }; + + return ; + }; + + it('renders the specified body and expression', () => { + const body = 'ARAGON'; + const expression = 'ANGRY'; + render(createTestComponent({ body, expression })); + expect(screen.getByTestId(body)); + expect(screen.getByTestId(expression)); + }); + + it('renders the hairs when defined', () => { + const hairs = 'BUN'; + render(createTestComponent({ hairs })); + expect(screen.getByTestId(hairs)).toBeInTheDocument(); + }); + + it('renders the sunglasses when defined', () => { + const sunglasses = 'THUGLIFE_ROUNDED'; + render(createTestComponent({ sunglasses })); + expect(screen.getByTestId(sunglasses)).toBeInTheDocument(); + }); + + it('renders the accessory when defined', () => { + const accessory = 'FLUSHED'; + render(createTestComponent({ accessory })); + expect(screen.getByTestId(accessory)).toBeInTheDocument(); + }); + + it('renders the object when defined', () => { + const object = 'WAGMI'; + render(createTestComponent({ object })); + expect(screen.getByTestId(object)).toBeInTheDocument(); + }); +}); diff --git a/src/components/illustrations/illustrationHuman/illustrationHuman.tsx b/src/components/illustrations/illustrationHuman/illustrationHuman.tsx new file mode 100644 index 000000000..891f3b59f --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHuman.tsx @@ -0,0 +1,95 @@ +import classNames from 'classnames'; +import type { HTMLAttributes } from 'react'; +import type { IllustrationObjectType } from '../illustrationObject'; +import { illustrationObjectList } from '../illustrationObject/illustrationObjectList'; +import { + illustrationHumanAccessoryList, + illustrationHumanBodyList, + illustrationHumanExpressionList, + illustrationHumanHairsList, + illustrationHumanSunglassesList, +} from './illustrationHumanList'; +import type { + IllustrationHumanAccessory, + IllustrationHumanBody, + IllustrationHumanExpression, + IllustrationHumanHairs, + IllustrationHumanSunglasses, +} from './illustrationHumanType'; + +export interface IIllustrationHumanProps extends HTMLAttributes { + /** + * Body of the illustration human. + */ + body: IllustrationHumanBody; + /** + * Expression of the illustration human. + */ + expression: IllustrationHumanExpression; + /** + * Hairs of the illustration human. + */ + hairs?: IllustrationHumanHairs; + /** + * Sunglasses of the illustration human. + */ + sunglasses?: IllustrationHumanSunglasses; + /** + * Accessory of the illustration human. + */ + accessory?: IllustrationHumanAccessory; + /** + * Object to be displayed. + */ + object?: IllustrationObjectType; + /** + * Position of the object. + * @default left + */ + objectPosition?: 'right' | 'left'; +} + +export const IllustrationHuman: React.FC = (props) => { + const { + body, + expression, + hairs, + sunglasses, + accessory, + className, + style, + object, + objectPosition = 'left', + ...otherProps + } = props; + + const Body = illustrationHumanBodyList[body]; + const Expression = illustrationHumanExpressionList[expression]; + + const Hairs = hairs ? illustrationHumanHairsList[hairs] : undefined; + const Sunglasses = sunglasses ? illustrationHumanSunglassesList[sunglasses] : undefined; + const Accessory = accessory ? illustrationHumanAccessoryList[accessory] : undefined; + const Object = object ? illustrationObjectList[object] : undefined; + + const computedStyle = { width: '100%', height: '100%', ...style }; + const commonProps = { className: 'absolute top-0 right-0' }; + + return ( +
+ + + {Hairs && } + {Sunglasses && } + {Accessory && } + {Object && ( + + )} + + ); +}; diff --git a/src/components/illustrations/illustrationHuman/illustrationHumanList.ts b/src/components/illustrations/illustrationHuman/illustrationHumanList.ts new file mode 100644 index 000000000..8350ac7da --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHumanList.ts @@ -0,0 +1,148 @@ +import type { SVGProps } from 'react'; + +/** Accessories */ +import AccessoryBuddha from '../../../assets/illustrations/human/accessories/buddha.svg'; +import AccessoryEarringsCircle from '../../../assets/illustrations/human/accessories/earrings-circle.svg'; +import AccessoryEarringsHoops from '../../../assets/illustrations/human/accessories/earrings-hoops.svg'; +import AccessoryEarringsRhombus from '../../../assets/illustrations/human/accessories/earrings-rhombus.svg'; +import AccessoryEarringsSkull from '../../../assets/illustrations/human/accessories/earrings-skull.svg'; +import AccessoryEarringsThunder from '../../../assets/illustrations/human/accessories/earrings-thunder.svg'; +import AccessoryExpression from '../../../assets/illustrations/human/accessories/expression.svg'; +import AccessoryFlushed from '../../../assets/illustrations/human/accessories/flushed.svg'; +import AccessoryHeadFlower from '../../../assets/illustrations/human/accessories/head-flower.svg'; +import AccessoryPiercingsTattoo from '../../../assets/illustrations/human/accessories/piercings-tattoo.svg'; +import AccessoryPiercings from '../../../assets/illustrations/human/accessories/piercings.svg'; + +/** Sunglasses */ +import SunglassesBigRounded from '../../../assets/illustrations/human/sunglasses/big-rounded.svg'; +import SunglassesBigSemirounded from '../../../assets/illustrations/human/sunglasses/big-semirounded.svg'; +import SunglassesLargeStylizedXl from '../../../assets/illustrations/human/sunglasses/large-stylized-xl.svg'; +import SunglassesLargeStylized from '../../../assets/illustrations/human/sunglasses/large-stylized.svg'; +import SunglassesPirate from '../../../assets/illustrations/human/sunglasses/pirate.svg'; +import SunglassesSmallIntellectual from '../../../assets/illustrations/human/sunglasses/small-intellectual.svg'; +import SunglassesSmallSympathetic from '../../../assets/illustrations/human/sunglasses/small-sympathetic.svg'; +import SunglassesSmallWeirdOne from '../../../assets/illustrations/human/sunglasses/small-weird-one.svg'; +import SunglassesSmallWeirdTwo from '../../../assets/illustrations/human/sunglasses/small-weird-two.svg'; +import SunglassesThuglifeRounded from '../../../assets/illustrations/human/sunglasses/thuglife-rounded.svg'; +import SunglassesThuglife from '../../../assets/illustrations/human/sunglasses/thuglife.svg'; + +/** Bodies */ +import BodyAragon from '../../../assets/illustrations/human/bodies/aragon.svg'; +import BodyBlocks from '../../../assets/illustrations/human/bodies/blocks.svg'; +import BodyChart from '../../../assets/illustrations/human/bodies/chart.svg'; +import BodyComputerCorrect from '../../../assets/illustrations/human/bodies/computer-correct.svg'; +import BodyComputer from '../../../assets/illustrations/human/bodies/computer.svg'; +import BodyCorrect from '../../../assets/illustrations/human/bodies/correct.svg'; +import BodyDoubleCorrect from '../../../assets/illustrations/human/bodies/double-correct.svg'; +import BodyElevating from '../../../assets/illustrations/human/bodies/elevating.svg'; +import BodyRelaxed from '../../../assets/illustrations/human/bodies/relaxed.svg'; +import BodySendingLove from '../../../assets/illustrations/human/bodies/sending-love.svg'; +import BodyVoting from '../../../assets/illustrations/human/bodies/voting.svg'; + +/** Expressions */ +import ExpressionAngry from '../../../assets/illustrations/human/expressions/angry.svg'; +import ExpressionCasual from '../../../assets/illustrations/human/expressions/casual.svg'; +import ExpressionCrying from '../../../assets/illustrations/human/expressions/crying.svg'; +import ExpressionDecided from '../../../assets/illustrations/human/expressions/decided.svg'; +import ExpressionExcited from '../../../assets/illustrations/human/expressions/excited.svg'; +import ExpressionSadLeft from '../../../assets/illustrations/human/expressions/sad-left.svg'; +import ExpressionSadRight from '../../../assets/illustrations/human/expressions/sad-right.svg'; +import ExpressionSmileWink from '../../../assets/illustrations/human/expressions/smile-wink.svg'; +import ExpressionSmile from '../../../assets/illustrations/human/expressions/smile.svg'; +import ExpressionSurprised from '../../../assets/illustrations/human/expressions/surprised.svg'; +import ExpressionSuspecting from '../../../assets/illustrations/human/expressions/suspecting.svg'; + +/** Hairs */ +import HairsAfro from '../../../assets/illustrations/human/hairs/afro.svg'; +import HairsBald from '../../../assets/illustrations/human/hairs/bald.svg'; +import HairsBun from '../../../assets/illustrations/human/hairs/bun.svg'; +import HairsCool from '../../../assets/illustrations/human/hairs/cool.svg'; +import HairsCurlyBangs from '../../../assets/illustrations/human/hairs/curly-bangs.svg'; +import HairsCurly from '../../../assets/illustrations/human/hairs/curly.svg'; +import HairsInformal from '../../../assets/illustrations/human/hairs/informal.svg'; +import HairsLong from '../../../assets/illustrations/human/hairs/long.svg'; +import HairsMiddle from '../../../assets/illustrations/human/hairs/middle.svg'; +import HairsOldschool from '../../../assets/illustrations/human/hairs/oldschool.svg'; +import HairsPunk from '../../../assets/illustrations/human/hairs/punk.svg'; +import HairsShort from '../../../assets/illustrations/human/hairs/short.svg'; + +import type { + IllustrationHumanAccessory, + IllustrationHumanBody, + IllustrationHumanExpression, + IllustrationHumanHairs, + IllustrationHumanSunglasses, +} from './illustrationHumanType'; + +type IllustrationHumanComponent = React.FC>; + +export const illustrationHumanAccessoryList: Record = { + BUDDHA: AccessoryBuddha, + EARRINGS_CIRCLE: AccessoryEarringsCircle, + EARRINGS_HOOPS: AccessoryEarringsHoops, + EARRINGS_RHOMBUS: AccessoryEarringsRhombus, + EARRINGS_SKULL: AccessoryEarringsSkull, + EARRINGS_THUNDER: AccessoryEarringsThunder, + EXPRESSION: AccessoryExpression, + FLUSHED: AccessoryFlushed, + HEAD_FLOWER: AccessoryHeadFlower, + PIERCINGS_TATTOO: AccessoryPiercingsTattoo, + PIERCINGS: AccessoryPiercings, +}; + +export const illustrationHumanSunglassesList: Record = { + BIG_ROUNDED: SunglassesBigRounded, + BIG_SEMIROUNDED: SunglassesBigSemirounded, + LARGE_STYLIZED_XL: SunglassesLargeStylizedXl, + LARGE_STYLIZED: SunglassesLargeStylized, + PIRATE: SunglassesPirate, + SMALL_INTELLECTUAL: SunglassesSmallIntellectual, + SMALL_SYMPATHETIC: SunglassesSmallSympathetic, + SMALL_WEIRD_ONE: SunglassesSmallWeirdOne, + SMALL_WEIRD_TWO: SunglassesSmallWeirdTwo, + THUGLIFE_ROUNDED: SunglassesThuglifeRounded, + THUGLIFE: SunglassesThuglife, +}; + +export const illustrationHumanBodyList: Record = { + ARAGON: BodyAragon, + BLOCKS: BodyBlocks, + CHART: BodyChart, + COMPUTER_CORRECT: BodyComputerCorrect, + COMPUTER: BodyComputer, + CORRECT: BodyCorrect, + DOUBLE_CORRECT: BodyDoubleCorrect, + ELEVATING: BodyElevating, + RELAXED: BodyRelaxed, + SENDING_LOVE: BodySendingLove, + VOTING: BodyVoting, +}; + +export const illustrationHumanExpressionList: Record = { + ANGRY: ExpressionAngry, + CASUAL: ExpressionCasual, + CRYING: ExpressionCrying, + DECIDED: ExpressionDecided, + EXCITED: ExpressionExcited, + SAD_LEFT: ExpressionSadLeft, + SAD_RIGHT: ExpressionSadRight, + SMILE_WINK: ExpressionSmileWink, + SMILE: ExpressionSmile, + SURPRISED: ExpressionSurprised, + SUSPECTING: ExpressionSuspecting, +}; + +export const illustrationHumanHairsList: Record = { + AFRO: HairsAfro, + BALD: HairsBald, + BUN: HairsBun, + COOL: HairsCool, + CURLY_BANGS: HairsCurlyBangs, + CURLY: HairsCurly, + INFORMAL: HairsInformal, + LONG: HairsLong, + MIDDLE: HairsMiddle, + OLDSCHOOL: HairsOldschool, + PUNK: HairsPunk, + SHORT: HairsShort, +}; diff --git a/src/components/illustrations/illustrationHuman/illustrationHumanType.ts b/src/components/illustrations/illustrationHuman/illustrationHumanType.ts new file mode 100644 index 000000000..2af066391 --- /dev/null +++ b/src/components/illustrations/illustrationHuman/illustrationHumanType.ts @@ -0,0 +1,65 @@ +export type IllustrationHumanAccessory = + | 'BUDDHA' + | 'EARRINGS_CIRCLE' + | 'EARRINGS_HOOPS' + | 'EARRINGS_RHOMBUS' + | 'EARRINGS_SKULL' + | 'EARRINGS_THUNDER' + | 'EXPRESSION' + | 'FLUSHED' + | 'HEAD_FLOWER' + | 'PIERCINGS_TATTOO' + | 'PIERCINGS'; + +export type IllustrationHumanSunglasses = + | 'BIG_ROUNDED' + | 'BIG_SEMIROUNDED' + | 'LARGE_STYLIZED_XL' + | 'LARGE_STYLIZED' + | 'PIRATE' + | 'SMALL_INTELLECTUAL' + | 'SMALL_SYMPATHETIC' + | 'SMALL_WEIRD_ONE' + | 'SMALL_WEIRD_TWO' + | 'THUGLIFE_ROUNDED' + | 'THUGLIFE'; + +export type IllustrationHumanBody = + | 'ARAGON' + | 'BLOCKS' + | 'CHART' + | 'COMPUTER_CORRECT' + | 'COMPUTER' + | 'CORRECT' + | 'DOUBLE_CORRECT' + | 'ELEVATING' + | 'RELAXED' + | 'SENDING_LOVE' + | 'VOTING'; + +export type IllustrationHumanExpression = + | 'ANGRY' + | 'CASUAL' + | 'CRYING' + | 'DECIDED' + | 'EXCITED' + | 'SAD_LEFT' + | 'SAD_RIGHT' + | 'SMILE_WINK' + | 'SMILE' + | 'SURPRISED' + | 'SUSPECTING'; + +export type IllustrationHumanHairs = + | 'AFRO' + | 'BALD' + | 'BUN' + | 'COOL' + | 'CURLY_BANGS' + | 'CURLY' + | 'INFORMAL' + | 'LONG' + | 'MIDDLE' + | 'OLDSCHOOL' + | 'PUNK' + | 'SHORT'; diff --git a/src/components/illustrations/illustrationHuman/index.ts b/src/components/illustrations/illustrationHuman/index.ts new file mode 100644 index 000000000..80ed9755c --- /dev/null +++ b/src/components/illustrations/illustrationHuman/index.ts @@ -0,0 +1,8 @@ +export { IllustrationHuman, type IIllustrationHumanProps } from './illustrationHuman'; +export type { + IllustrationHumanAccessory, + IllustrationHumanBody, + IllustrationHumanExpression, + IllustrationHumanHairs, + IllustrationHumanSunglasses, +} from './illustrationHumanType'; diff --git a/src/components/illustrations/illustrationObject/illustrationObject.stories.tsx b/src/components/illustrations/illustrationObject/illustrationObject.stories.tsx new file mode 100644 index 000000000..6e53b4fed --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObject.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { IllustrationObject } from './illustrationObject'; + +const meta: Meta = { + title: 'components/Illustrations/IllustrationObject', + component: IllustrationObject, + tags: ['autodocs'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=8874-14443&mode=dev', + }, + }, +}; + +type Story = StoryObj; + +/** + * Default usage example of the IllustrationObject component. + */ +export const Default: Story = { + args: { + object: 'ACTION', + }, +}; + +export default meta; diff --git a/src/components/illustrations/illustrationObject/illustrationObject.test.tsx b/src/components/illustrations/illustrationObject/illustrationObject.test.tsx new file mode 100644 index 000000000..943453619 --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObject.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from '@testing-library/react'; +import { IllustrationObject, type IIllustrationObjectProps } from './illustrationObject'; + +describe(' component', () => { + const createTestComponent = (props?: Partial) => { + const completeProps: IIllustrationObjectProps = { + object: 'ACTION', + ...props, + }; + + return ; + }; + + it('renders the illustration object', () => { + const object = 'MAGNIFYING_GLASS'; + render(createTestComponent({ object })); + expect(screen.getByTestId(object)).toBeInTheDocument(); + }); +}); diff --git a/src/components/illustrations/illustrationObject/illustrationObject.tsx b/src/components/illustrations/illustrationObject/illustrationObject.tsx new file mode 100644 index 000000000..ad2dd7252 --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObject.tsx @@ -0,0 +1,17 @@ +import type { SVGProps } from 'react'; +import { illustrationObjectList } from './illustrationObjectList'; +import type { IllustrationObjectType } from './illustrationObjectType'; + +export interface IIllustrationObjectProps extends SVGProps { + /** + * Illustration object to render. + */ + object: IllustrationObjectType; +} + +export const IllustrationObject: React.FC = (props) => { + const { object, ...otherProps } = props; + const IllustrationObject = illustrationObjectList[object]; + + return ; +}; diff --git a/src/components/illustrations/illustrationObject/illustrationObjectList.ts b/src/components/illustrations/illustrationObject/illustrationObjectList.ts new file mode 100644 index 000000000..9fd540c6c --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObjectList.ts @@ -0,0 +1,53 @@ +import type { SVGProps } from 'react'; +import Action from '../../../assets/illustrations/objects/action.svg'; +import App from '../../../assets/illustrations/objects/app.svg'; +import Archive from '../../../assets/illustrations/objects/archive.svg'; +import Book from '../../../assets/illustrations/objects/book.svg'; +import Build from '../../../assets/illustrations/objects/build.svg'; +import Chain from '../../../assets/illustrations/objects/chain.svg'; +import Database from '../../../assets/illustrations/objects/database.svg'; +import Error from '../../../assets/illustrations/objects/error.svg'; +import Explore from '../../../assets/illustrations/objects/explore.svg'; +import Gas from '../../../assets/illustrations/objects/gas.svg'; +import Goal from '../../../assets/illustrations/objects/goal.svg'; +import Labels from '../../../assets/illustrations/objects/labels.svg'; +import Lightbulb from '../../../assets/illustrations/objects/lightbulb.svg'; +import MagnifyingGlass from '../../../assets/illustrations/objects/magnifying-glass.svg'; +import NotFound from '../../../assets/illustrations/objects/not-found.svg'; +import Security from '../../../assets/illustrations/objects/security.svg'; +import Settings from '../../../assets/illustrations/objects/settings.svg'; +import SmartContract from '../../../assets/illustrations/objects/smart-contract.svg'; +import Success from '../../../assets/illustrations/objects/success.svg'; +import Users from '../../../assets/illustrations/objects/users.svg'; +import Wagmi from '../../../assets/illustrations/objects/wagmi.svg'; +import Wallet from '../../../assets/illustrations/objects/wallet.svg'; +import Warning from '../../../assets/illustrations/objects/warning.svg'; +import type { IllustrationObjectType } from './illustrationObjectType'; + +type IllustrationObjectComponent = React.FC>; + +export const illustrationObjectList: Record = { + ACTION: Action, + APP: App, + ARCHIVE: Archive, + BOOK: Book, + BUILD: Build, + CHAIN: Chain, + DATABASE: Database, + ERROR: Error, + EXPLORE: Explore, + GAS: Gas, + GOAL: Goal, + LABELS: Labels, + LIGHTBULB: Lightbulb, + MAGNIFYING_GLASS: MagnifyingGlass, + NOT_FOUND: NotFound, + SECURITY: Security, + SETTINGS: Settings, + SMART_CONTRACT: SmartContract, + SUCCESS: Success, + USERS: Users, + WAGMI: Wagmi, + WALLET: Wallet, + WARNING: Warning, +}; diff --git a/src/components/illustrations/illustrationObject/illustrationObjectType.ts b/src/components/illustrations/illustrationObject/illustrationObjectType.ts new file mode 100644 index 000000000..67eef2bf2 --- /dev/null +++ b/src/components/illustrations/illustrationObject/illustrationObjectType.ts @@ -0,0 +1,24 @@ +export type IllustrationObjectType = + | 'ACTION' + | 'APP' + | 'ARCHIVE' + | 'BOOK' + | 'BUILD' + | 'CHAIN' + | 'DATABASE' + | 'ERROR' + | 'EXPLORE' + | 'GAS' + | 'GOAL' + | 'LABELS' + | 'LIGHTBULB' + | 'MAGNIFYING_GLASS' + | 'NOT_FOUND' + | 'SECURITY' + | 'SETTINGS' + | 'SMART_CONTRACT' + | 'SUCCESS' + | 'USERS' + | 'WAGMI' + | 'WALLET' + | 'WARNING'; diff --git a/src/components/illustrations/illustrationObject/index.ts b/src/components/illustrations/illustrationObject/index.ts new file mode 100644 index 000000000..6c7009a75 --- /dev/null +++ b/src/components/illustrations/illustrationObject/index.ts @@ -0,0 +1,2 @@ +export { IllustrationObject, type IIllustrationObjectProps } from './illustrationObject'; +export { IllustrationObjectType } from './illustrationObjectType'; diff --git a/src/components/illustrations/index.ts b/src/components/illustrations/index.ts index 4a1997724..4d5890a08 100644 --- a/src/components/illustrations/index.ts +++ b/src/components/illustrations/index.ts @@ -1,2 +1,2 @@ -export * from './human/illuHuman'; -export * from './object/illuObject'; +export * from './illustrationHuman'; +export * from './illustrationObject'; diff --git a/src/components/illustrations/object/action.tsx b/src/components/illustrations/object/action.tsx deleted file mode 100644 index be971060d..000000000 --- a/src/components/illustrations/object/action.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Action: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/app.tsx b/src/components/illustrations/object/app.tsx deleted file mode 100644 index c5303e2c4..000000000 --- a/src/components/illustrations/object/app.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const App: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/archive.tsx b/src/components/illustrations/object/archive.tsx deleted file mode 100644 index eb0a366bb..000000000 --- a/src/components/illustrations/object/archive.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Archive: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/book.tsx b/src/components/illustrations/object/book.tsx deleted file mode 100644 index ffc6b7fc6..000000000 --- a/src/components/illustrations/object/book.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Book: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/build.tsx b/src/components/illustrations/object/build.tsx deleted file mode 100644 index bcf62a439..000000000 --- a/src/components/illustrations/object/build.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Build: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/chain.tsx b/src/components/illustrations/object/chain.tsx deleted file mode 100644 index 4207a1a16..000000000 --- a/src/components/illustrations/object/chain.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Chain: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/illustrations/object/database.tsx b/src/components/illustrations/object/database.tsx deleted file mode 100644 index cc8788029..000000000 --- a/src/components/illustrations/object/database.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Database: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/error.tsx b/src/components/illustrations/object/error.tsx deleted file mode 100644 index 10b5f4762..000000000 --- a/src/components/illustrations/object/error.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Error: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/explore.tsx b/src/components/illustrations/object/explore.tsx deleted file mode 100644 index ec13c85a3..000000000 --- a/src/components/illustrations/object/explore.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Explore: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/gas.tsx b/src/components/illustrations/object/gas.tsx deleted file mode 100644 index 073848498..000000000 --- a/src/components/illustrations/object/gas.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Gas: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/illustrations/object/goal.tsx b/src/components/illustrations/object/goal.tsx deleted file mode 100644 index 1ea267ad1..000000000 --- a/src/components/illustrations/object/goal.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Goal: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/illuObject.stories.tsx b/src/components/illustrations/object/illuObject.stories.tsx deleted file mode 100644 index 5b7607b87..000000000 --- a/src/components/illustrations/object/illuObject.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IlluObject, type IlluObjectProps } from './illuObject'; - -export default { - title: 'Components/Illustration/Object', - component: IlluObject, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - object: 'magnifying_glass', -}; diff --git a/src/components/illustrations/object/illuObject.test.tsx b/src/components/illustrations/object/illuObject.test.tsx deleted file mode 100644 index d7e37ece3..000000000 --- a/src/components/illustrations/object/illuObject.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { IlluObject, objectNames } from './illuObject'; - -describe('IlluObject', () => { - // eslint-disable-next-line - function setup(args: any) { - // TODO: this is temp fix, please test properly - render(); - return screen; - } - - objectNames.map((name) => { - test(`${name} variant should render without crashing`, () => { - const element = setup({ object: name }); - expect(element).toBeInTheDocument; - }); - }); -}); diff --git a/src/components/illustrations/object/illuObject.tsx b/src/components/illustrations/object/illuObject.tsx deleted file mode 100644 index 7512dd514..000000000 --- a/src/components/illustrations/object/illuObject.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React, { type HTMLAttributes } from 'react'; - -import { UnknownIllustrationVariantError } from '../../../utils/illustrations'; -import { Action } from './action'; -import { App } from './app'; -import { Archive } from './archive'; -import { Book } from './book'; -import { Build } from './build'; -import { Chain } from './chain'; -import { Database } from './database'; -import { Error } from './error'; -import { Explore } from './explore'; -import { Gas } from './gas'; -import { Goal } from './goal'; -import { Labels } from './labels'; -import { LightBulb } from './lightbulb'; -import { MagnifyingGlass } from './magnifyingGlass'; -import { NotFound } from './notFound'; -import { Security } from './security'; -import { Settings } from './settings'; -import { SmartContract } from './smartContract'; -import { Success } from './success'; -import { Users } from './users'; -import { Wagmi } from './wagmi'; -import { Wallet } from './wallet'; -import { Warning } from './warning'; - -export const objectNames = [ - 'action', - 'app', - 'archive', - 'book', - 'build', - 'chain', - 'database', - 'error', - 'explore', - 'gas', - 'goal', - 'labels', - 'lightbulb', - 'magnifying_glass', - 'not_found', - 'security', - 'settings', - 'smart_contract', - 'success', - 'users', - 'warning', - 'wagmi', - 'wallet', -] as const; - -export type IlluObjectProps = { - object: (typeof objectNames)[number]; -}; - -export const IlluObject: React.FC> = ({ object, ...rest }) => { - switch (object) { - case 'action': - return ; - case 'app': - return ; - case 'archive': - return ; - case 'book': - return ; - case 'build': - return ; - case 'chain': - return ; - case 'database': - return ; - case 'error': - return ; - case 'explore': - return ; - case 'gas': - return ; - case 'goal': - return ; - case 'labels': - return ; - case 'lightbulb': - return ; - case 'magnifying_glass': - return ; - case 'not_found': - return ; - case 'security': - return ; - case 'settings': - return ; - case 'smart_contract': - return ; - case 'success': - return ; - case 'users': - return ; - case 'wagmi': - return ; - case 'wallet': - return ; - case 'warning': - return ; - default: - throw new UnknownIllustrationVariantError(object, 'expression'); - } -}; diff --git a/src/components/illustrations/object/index.tsx b/src/components/illustrations/object/index.tsx deleted file mode 100644 index 87f610b7a..000000000 --- a/src/components/illustrations/object/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -export { Action as action } from './action'; -export { App as app } from './app'; -export { Archive as archive } from './archive'; -export { Book as book } from './book'; -export { Build as build } from './build'; -export { Chain as chain } from './chain'; -export { Database as database } from './database'; -export { Error as error } from './error'; -export { Explore as explore } from './explore'; -export { Gas as gas } from './gas'; -export { Goal as goal } from './goal'; -export { Labels as labels } from './labels'; -export { LightBulb as lightbulb } from './lightbulb'; -export { MagnifyingGlass as magnifying_glass } from './magnifyingGlass'; -export { NotFound as notfound } from './notFound'; -export { Security as security } from './security'; -export { Settings as settings } from './settings'; -export { SmartContract as smart_contract } from './smartContract'; -export { Success as success } from './success'; -export { Users as users } from './users'; -export { Wagmi as wagmi } from './wagmi'; -export { Wallet as wallet } from './wallet'; -export { Warning as warning } from './warning'; diff --git a/src/components/illustrations/object/labels.tsx b/src/components/illustrations/object/labels.tsx deleted file mode 100644 index 4cc5387f3..000000000 --- a/src/components/illustrations/object/labels.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Labels: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/lightbulb.tsx b/src/components/illustrations/object/lightbulb.tsx deleted file mode 100644 index 9a4eab9f1..000000000 --- a/src/components/illustrations/object/lightbulb.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const LightBulb: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/magnifyingGlass.tsx b/src/components/illustrations/object/magnifyingGlass.tsx deleted file mode 100644 index 02011685c..000000000 --- a/src/components/illustrations/object/magnifyingGlass.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const MagnifyingGlass: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/illustrations/object/notFound.tsx b/src/components/illustrations/object/notFound.tsx deleted file mode 100644 index b5026de41..000000000 --- a/src/components/illustrations/object/notFound.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const NotFound: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/security.tsx b/src/components/illustrations/object/security.tsx deleted file mode 100644 index 8df37a894..000000000 --- a/src/components/illustrations/object/security.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Security: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/settings.tsx b/src/components/illustrations/object/settings.tsx deleted file mode 100644 index 6a76cd7df..000000000 --- a/src/components/illustrations/object/settings.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Settings: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - ); -}; diff --git a/src/components/illustrations/object/smartContract.tsx b/src/components/illustrations/object/smartContract.tsx deleted file mode 100644 index e035afbb4..000000000 --- a/src/components/illustrations/object/smartContract.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const SmartContract: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/smartContracts.tsx b/src/components/illustrations/object/smartContracts.tsx deleted file mode 100644 index 8b6c85f7a..000000000 --- a/src/components/illustrations/object/smartContracts.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const SmartContracts: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/success.tsx b/src/components/illustrations/object/success.tsx deleted file mode 100644 index 7f878e865..000000000 --- a/src/components/illustrations/object/success.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Success: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/illustrations/object/users.tsx b/src/components/illustrations/object/users.tsx deleted file mode 100644 index 98d36b9a9..000000000 --- a/src/components/illustrations/object/users.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Users: IconType = ({ height = 160, width = 160, ...props }) => { - const pathStyle = { - fill: 'none', - stroke: '#001f5c', - strokeWidth: '2.6', - }; - const highlightStyle = { - fill: '#3164fa', - stroke: '#3164fa', - strokeWidth: '2.6', - }; - return ( - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/wagmi.tsx b/src/components/illustrations/object/wagmi.tsx deleted file mode 100644 index 286336499..000000000 --- a/src/components/illustrations/object/wagmi.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Wagmi: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - - - ); -}; diff --git a/src/components/illustrations/object/wallet.tsx b/src/components/illustrations/object/wallet.tsx deleted file mode 100644 index dc1fedd87..000000000 --- a/src/components/illustrations/object/wallet.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Wallet: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/illustrations/object/warning.tsx b/src/components/illustrations/object/warning.tsx deleted file mode 100644 index b8c519801..000000000 --- a/src/components/illustrations/object/warning.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { type IconType } from '../../icons'; - -export const Warning: IconType = ({ height = 160, width = 160, ...props }) => { - return ( - - - - - - ); -}; diff --git a/src/components/index.ts b/src/components/index.ts index cb650a28a..488c2d15c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,26 +1,8 @@ +export * from './actionItem'; export * from './alerts'; -export * from './avatar'; -export * from './backdrop'; -export * from './breadcrumb'; +export * from './avatars'; export * from './button'; -export * from './cards'; -export * from './checkbox'; -export * from './dropdown'; -export * from './headers'; -export * from './icons'; +export * from './icon'; export * from './illustrations'; -export * from './input'; -export * from './label'; -export * from './link'; -export * from './listItem'; -export * from './modal'; -export * from './pagination'; export * from './progress'; export * from './spinner'; -export * from './table'; -export * from './tag'; -export * from './textarea'; -export * from './tokenListItem'; -export * from './transferListItem'; -export * from './widgets'; -export * from './wizard'; diff --git a/src/components/input/dateInput.stories.tsx b/src/components/input/dateInput.stories.tsx deleted file mode 100644 index acb37cfb0..000000000 --- a/src/components/input/dateInput.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { DateInput, type DateInputProps } from './dateInput'; - -export default { - title: 'Components/Input/Date', - component: DateInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Date = Template.bind({}); -Date.args = { - disabled: false, - value: '2022-04-20', -}; diff --git a/src/components/input/dateInput.test.tsx b/src/components/input/dateInput.test.tsx deleted file mode 100644 index ea40cf5ab..000000000 --- a/src/components/input/dateInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { DateInput } from './dateInput'; - -describe('TextInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('date-input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/dateInput.tsx b/src/components/input/dateInput.tsx deleted file mode 100644 index 01294dbb1..000000000 --- a/src/components/input/dateInput.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -export type DateInputProps = React.InputHTMLAttributes; - -export const DateInput: React.FC = ({ disabled, ...props }) => { - return ( - - - - ); -}; - -type InputContainerProps = Pick; - -const InputContainer = styled.div.attrs(({ disabled }) => { - const baseClasses = 'flex relative items-center p-1 rounded-xl border-2 font-normal cursor-pointer'; - let className = `${baseClasses}`; - - if (disabled) { - className += ' bg-ui-100 text-ui-300 border-ui-200'; - } else { - const focusVisibleClasses = 'focus-within:ring-2 focus-within:ring-primary-500'; - const hoverClasses = 'hover:border-ui-300'; - const activeClasses = 'active:border-primary-500 active:ring-0'; - className += ` bg-ui-0 text-ui-600 ${focusVisibleClasses} ${hoverClasses} ${activeClasses}`; - } - return { className, disabled }; -})``; - -const StyledInput = styled.input.attrs(() => { - const baseClasses = 'w-full bg-transparent'; - const className = `${baseClasses}`; - - return { className }; -})` - ::-webkit-calendar-picker-indicator { - } - - outline: 0; -`; diff --git a/src/components/input/dropdownInput.stories.tsx b/src/components/input/dropdownInput.stories.tsx deleted file mode 100644 index 858ef7847..000000000 --- a/src/components/input/dropdownInput.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { DropdownInput, type DropDownInputProps } from './dropdownInput'; - -export default { - title: 'Components/Input/Dropdown', - component: DropdownInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Dropdown = Template.bind({}); -Dropdown.args = { - mode: 'default', - disabled: false, -}; diff --git a/src/components/input/dropdownInput.test.tsx b/src/components/input/dropdownInput.test.tsx deleted file mode 100644 index a44ddd80f..000000000 --- a/src/components/input/dropdownInput.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { DropdownInput } from './dropdownInput'; - -describe('DropdownInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByRole('button'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); - - test('should call the onClick method when clicked', () => { - const mockHandler = jest.fn(); - const element = setup({ onClick: mockHandler }); - - fireEvent.click(element); - expect(mockHandler).toHaveBeenCalledTimes(1); - }); -}); diff --git a/src/components/input/dropdownInput.tsx b/src/components/input/dropdownInput.tsx deleted file mode 100644 index daca838fc..000000000 --- a/src/components/input/dropdownInput.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { IconChevronDown } from '../icons'; -import { type StyledContainerProps } from './numberInput'; - -export type DropDownInputProps = { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - disabled?: boolean; - value?: string; - name?: string; - placeholder?: string; - onClick: () => void; -}; -/** Dropdown input with variable styling (depending on mode) */ - -export const DropdownInput: React.FC = ({ - mode = 'default', - disabled, - value, - name, - placeholder, - onClick, -}) => { - return ( - - {value ?? {placeholder}} - - - ); -}; - -const Container = styled.button.attrs(({ mode, disabled }: StyledContainerProps) => { - let className = `${disabled ? 'bg-ui-100' : 'bg-ui-0'} flex bg-ui-0 focus:outline-none focus-within:ring-2 - focus-within:ring-primary-500 py-1.5 px-2 rounded-xl w-full - hover:border-ui-300 border-2 active:border-primary-500 active:ring-0 - items-center justify-between `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})` - height: fit-content; -`; - -export type StyledChevronDownProps = Pick; - -const StyledIconChevronDown = styled(IconChevronDown).attrs(({ disabled }: StyledChevronDownProps) => ({ - className: `${disabled ? 'text-ui-300' : 'text-ui-600'}`, -}))``; - -const Placeholder = styled.span.attrs({ - className: 'text-ui-300', -})``; diff --git a/src/components/input/index.ts b/src/components/input/index.ts deleted file mode 100644 index 0e9b2588f..000000000 --- a/src/components/input/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Types have to be explicitly re - exported(export type { abc } from 'component') - * or exported with export * from 'component'; in TS 3.7 or older when the - * --isolatedModules flag is provided - */ -export { TextInput } from './textInput'; -export type { TextInputProps } from './textInput'; - -export { SearchInput } from './searchInput'; -export type { SearchInputProps } from './searchInput'; - -export { NumberInput } from './numberInput'; -export type { NumberInputProps } from './numberInput'; - -export { DropdownInput } from './dropdownInput'; -export type { DropDownInputProps } from './dropdownInput'; - -export { TimeInput } from './timeInput'; -export type { TimeInputProps } from './timeInput'; - -export { DateInput } from './dateInput'; -export type { DateInputProps } from './dateInput'; - -export { WalletInput } from './walletInput'; -export type { WalletInputValue as InputValue, WalletInputProps } from './walletInput'; - -export { WalletInputLegacy } from './walletInputLegacy'; -export type { WalletInputLegacyProps } from './walletInputLegacy'; - -export * from './inputImageSingle'; -export * from './valueInput'; diff --git a/src/components/input/inputImageSingle.stories.tsx b/src/components/input/inputImageSingle.stories.tsx deleted file mode 100644 index 9d1cf1418..000000000 --- a/src/components/input/inputImageSingle.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useMemo, useState } from 'react'; -import { InputImageSingle, type InputImageSingleProps } from './inputImageSingle'; - -export default { - title: 'Components/Input/Image/Single', - component: InputImageSingle, -} as Meta; - -const Template: Story = (args) => { - const [preview, setPreview] = useState(null); - - const PreviewSrc: string | null = useMemo(() => { - return preview ? URL.createObjectURL(preview) : ''; - }, [preview]); - - return setPreview(file)} />; -}; - -export const Single = Template.bind({}); -Single.args = { - onChange: () => null, - maxDimension: 2400, - minDimension: 256, - maxFileSize: 3000000, - onlySquare: true, - acceptableFileFormat: 'image/jpg, image/jpeg, image/png, image/gif', - onError: () => - alert( - 'Please provide a squared image (PNG, SVG, JPG or GIF) with a maximum of 3MB and size between 256px and 2400 px on each side', - ), -}; diff --git a/src/components/input/inputImageSingle.test.tsx b/src/components/input/inputImageSingle.test.tsx deleted file mode 100644 index 1cb50b3b0..000000000 --- a/src/components/input/inputImageSingle.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { InputImageSingle } from './inputImageSingle'; - -describe('inputImageSingle', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input-image'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/inputImageSingle.tsx b/src/components/input/inputImageSingle.tsx deleted file mode 100644 index 60b4bec0a..000000000 --- a/src/components/input/inputImageSingle.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { useDropzone, type FileRejection } from 'react-dropzone'; -import { styled } from 'styled-components'; -import { ButtonIcon } from '../button'; -import { IconAdd, IconClose } from '../icons/interface'; -import { Spinner } from '../spinner'; - -export type InputImageSingleProps = { - /** - * onChange Event will fires after uploading a valid image - */ - onChange: (file: File | null) => void; - /** - * All error messages will pass as onError function inputs - */ - onError: (error: { code: string; message: string }) => void; - /** - * limit maximum dimension of the image (in px) - */ - maxDimension?: number; - /** - * limit minimum dimension of the image (in px) - */ - minDimension?: number; - /** - * limit maximum file size of the image (in bytes) - */ - maxFileSize?: number; - /** - * Alow Square image only - */ - onlySquare?: boolean; - /** - * Passing image src for preview - */ - preview?: string; - /** - * acceptable image formats - */ - acceptableFileFormat?: string; -}; - -export const InputImageSingle: React.FC = ({ - onChange, - maxDimension, - minDimension, - maxFileSize, - onlySquare = false, - preview: previewSrc = '', - acceptableFileFormat = 'image/jpg, image/jpeg, image/png, image/gif, image/svg+xml', - onError, -}) => { - const [loading, setLoading] = useState(false); - const [preview, setPreview] = useState(previewSrc); - const onDrop = useCallback( - (acceptedFiles: File[], onDropRejected: FileRejection[]) => { - if (onDropRejected.length !== 0) { - onError(onDropRejected[0].errors[0]); - } else { - /** - * Render image to calculate the dimensions - */ - setLoading(true); - const image: HTMLImageElement = new Image(); - image.addEventListener('load', () => { - setLoading(false); - if (maxDimension && (image.width > maxDimension || image.height > maxDimension)) { - onError({ - code: 'wrong-dimension', - message: `Please provide a squared image with size between ${minDimension}px and ${maxDimension}px on each side`, - }); - } else if (minDimension && (image.width < minDimension || image.height < minDimension)) { - onError({ - code: 'wrong-dimension', - message: `Please provide a squared image with size between ${minDimension}px and ${maxDimension}px on each side`, - }); - return; - } else if ( - onlySquare && - image.height !== image.width // check if the image is square or not - ) { - onError({ - code: 'wrong-dimension', - message: `Please provide a squared image with size between ${minDimension}px and ${maxDimension}px on each side`, - }); - } else { - onChange(acceptedFiles[0]); - setPreview(image.src); - } - }); - image.src = URL.createObjectURL(acceptedFiles[0]); - } - }, - [maxDimension, minDimension, onChange, onError, onlySquare], - ); - - const { - getRootProps, - getInputProps, - isDragActive: isdragactive, - } = useDropzone({ - onDrop, - ...(maxFileSize && { maxSize: maxFileSize }), - accept: acceptableFileFormat, - }); - - if (loading) { - return ( - - - - ); - } - - return preview !== '' ? ( - - - } - size="small" - mode="secondary" - onClick={() => { - setPreview(''); - onChange(null); - }} - /> - - ) : ( - - - - - ); -}; - -type DefaultContainerProps = { - isdragactive: boolean; -}; - -const DefaultContainer = styled.div.attrs(({ isdragactive }) => ({ - className: `flex items-center justify-center bg-ui-0 - h-8 w-8 border-dashed ${isdragactive ? 'border-primary-500' : 'border-ui-100'} border-2 rounded-xl cursor-pointer`, -}))``; - -const LoadingContainer = styled.div.attrs({ - className: `flex items-center justify-center bg-ui-0 - h-8 w-8 border-dashed border-primary-500 border-2 rounded-xl`, -})``; - -const ImageContainer = styled.div.attrs({ - className: 'relative h-8 w-8', -})``; - -const Preview = styled.img.attrs({ - className: 'rounded-xl bg-ui-0 h-8 w-8', -})``; - -const StyledButton = styled(ButtonIcon).attrs({ - className: 'absolute -top-2 -right-1.75', -})` - box-shadow: 0px 4px 8px rgba(31, 41, 51, 0.04), 0px 0px 2px rgba(31, 41, 51, 0.06), - 0px 0px 1px rgba(31, 41, 51, 0.04); -`; - -const StyledIconAdd = styled(IconAdd).attrs(({ isdragactive }: DefaultContainerProps) => ({ - className: `${isdragactive ? 'text-primary-500' : 'text-ui-600'}`, -}))``; diff --git a/src/components/input/numberInput.stories.tsx b/src/components/input/numberInput.stories.tsx deleted file mode 100644 index 17402ae71..000000000 --- a/src/components/input/numberInput.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { NumberInput, type NumberInputProps } from './numberInput'; - -export default { - title: 'Components/Input/Number', - component: NumberInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState(''); - return setValue(e.target.value)} />; -}; - -export const Number = Template.bind({}); -Number.args = { - mode: 'default', - view: 'default', - disabled: false, -}; diff --git a/src/components/input/numberInput.test.tsx b/src/components/input/numberInput.test.tsx deleted file mode 100644 index aff16d82e..000000000 --- a/src/components/input/numberInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { NumberInput } from './numberInput'; - -describe('NumberInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('number-input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/numberInput.tsx b/src/components/input/numberInput.tsx deleted file mode 100644 index af02365f5..000000000 --- a/src/components/input/numberInput.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import React, { useRef } from 'react'; -import { styled } from 'styled-components'; - -import { ButtonIcon } from '../button'; -import { IconAdd, IconRemove } from '../icons'; - -export type NumberInputProps = React.InputHTMLAttributes & { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - /** - * change the input view with corresponding symbols - */ - view?: 'default' | 'percentage' | 'bigger'; - disabled?: boolean; - width?: number; - value: string; - disableIncrement?: boolean; - disableDecrement?: boolean; - /** Determines whether decimal values are accepted */ - includeDecimal?: boolean; -}; - -export const NumberInput: React.FC = ({ - mode = 'default', - view = 'default', - disabled, - disableDecrement, - disableIncrement, - width, - value, - includeDecimal, - onChange, - ...props -}) => { - const inputRef = useRef(null); - - const handleStepperChange = (mode: 'up' | 'down') => { - mode === 'up' ? inputRef.current?.stepUp() : inputRef.current?.stepDown(); - - // For Calling th onChange Function - inputRef.current?.dispatchEvent(new Event('input', { bubbles: true })); - }; - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (!includeDecimal && event.key === '.') { - event?.preventDefault(); - } else { - props.onKeyDown?.(event); - } - }; - - const handleChange = (event: React.ChangeEvent) => { - // this handles pasting in the value/ could also use onPaste event - if (!includeDecimal) { - event.target.value = event.target.value.replace(/[^-0-9]/g, ''); - } - - onChange?.(event); - }; - - // input width based on view - const inputWidth: { - [value: string]: string; - } = { - bigger: 'w-8', - percentage: 'w-3.5', - default: 'w-full', - }; - - // input placeholder based on view - const placeholder: { - [value: string]: string; - } = { - bigger: '≥0', - percentage: '0%', - default: '0', - }; - - // input range based on view - const inputRange: { - [value: string]: { - min?: number; - max?: number; - }; - } = { - bigger: { - min: 0, - }, - percentage: { - min: 0, - max: 100, - }, - default: {}, - }; - - return ( - - } - disabled={disabled ?? disableDecrement} - onClick={() => handleStepperChange('down')} - /> - - {view === 'bigger' && value !== '' && ≥} - { - e.preventDefault(); - (e.target as HTMLInputElement).blur(); - }} - /> - {view === 'percentage' && value !== '' && %} - - } - disabled={disabled ?? disableIncrement} - onClick={() => handleStepperChange('up')} - /> - - ); -}; - -export type StyledContainerProps = Pick; - -const Container = styled.div.attrs(({ mode, disabled, width }) => { - let className = `${disabled ? 'bg-ui-100' : 'bg-ui-0'} inline-flex bg-ui-0 ${ - width ? '' : 'w-full' - } focus:outline-none items-center py-0.75 px-1 - focus-within:ring-2 focus-within:ring-primary-500 justify-between - rounded-xl hover:border-ui-300 border-2 active:border-primary-500 - active:ring-0 - `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { - className, - ...(width && { style: { width: `${width}px` } }), - }; -})``; -const InputWrapper = styled.div.attrs({ - className: 'flex justify-center w-4/5', -})``; - -export type StyledNumberInputProps = Pick & { - inputWidth: string; -}; - -export type PercentProps = Pick; - -const Percent = styled.label.attrs(({ disabled }) => { - const className: string | undefined = `${disabled ? 'text-ui-300' : 'text-ui-600'}`; - return { - className, - }; -})``; - -const LeftAdornment = styled.label.attrs(({ disabled }) => { - const className: string | undefined = `${disabled ? 'text-ui-300' : 'text-ui-600'}`; - return { - className, - }; -})``; - -const StyledNumberInput = styled.input.attrs(({ disabled, inputWidth }) => { - const className: string | undefined = `${ - disabled ? 'text-ui-300' : 'text-ui-600' - } bg-transparent margin-0 ${inputWidth}`; - return { - className, - }; -})` - text-align: center; - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - -moz-appearance: textfield; - - outline: 0; -`; - -const StyledIconButton = styled(ButtonIcon).attrs({ - className: 'rounded-lg', -})``; diff --git a/src/components/input/searchInput.stories.tsx b/src/components/input/searchInput.stories.tsx deleted file mode 100644 index 25ff36620..000000000 --- a/src/components/input/searchInput.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { SearchInput, type SearchInputProps } from './searchInput'; - -export default { - title: 'Components/Input/Search', - component: SearchInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState(''); - return setValue(e.target.value)} />; -}; - -export const Search = Template.bind({}); -Search.args = { - mode: 'default', - placeholder: 'Placeholder', - disabled: false, -}; diff --git a/src/components/input/searchInput.test.tsx b/src/components/input/searchInput.test.tsx deleted file mode 100644 index 05299b2b5..000000000 --- a/src/components/input/searchInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { SearchInput } from './searchInput'; - -describe('inputSearch', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('search-input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/searchInput.tsx b/src/components/input/searchInput.tsx deleted file mode 100644 index 1da0b59c4..000000000 --- a/src/components/input/searchInput.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { IconClose, IconSearch } from '../icons'; -import { Spinner } from '../spinner'; -import { TextInput, type TextInputProps } from './textInput'; - -export type SearchInputProps = Omit & { - /** - * Change input state into isLoading... - */ - isLoading?: boolean; -}; - -export const SearchInput: React.FC = ({ isLoading = false, value, onChange, ...props }) => { - return ( - - - - ) : ( - - - - ) - } - value={value} - onChange={onChange} - rightAdornment={ - value !== '' && ( - - ) - } - {...props} - /> - ); -}; - -const LeftAdornmentWrapper = styled.div.attrs({ - className: 'pl-2 pr-1.5', -})``; - -const RightAdornmentWrapper = styled.div.attrs({ - className: 'pr-2', -})``; diff --git a/src/components/input/textInput.stories.tsx b/src/components/input/textInput.stories.tsx deleted file mode 100644 index e713a96f2..000000000 --- a/src/components/input/textInput.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { TextInput, type TextInputProps } from './textInput'; - -export default { - title: 'Components/Input/Text', - component: TextInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Text = Template.bind({}); -Text.args = { - mode: 'default', - placeholder: 'Placeholder', -}; diff --git a/src/components/input/textInput.test.tsx b/src/components/input/textInput.test.tsx deleted file mode 100644 index 2a3725871..000000000 --- a/src/components/input/textInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { TextInput } from './textInput'; - -describe('TextInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/textInput.tsx b/src/components/input/textInput.tsx deleted file mode 100644 index 98a933a54..000000000 --- a/src/components/input/textInput.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { type ReactNode } from 'react'; -import { styled } from 'styled-components'; - -export type TextInputProps = React.InputHTMLAttributes & { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - /** - * left adornment - */ - leftAdornment?: ReactNode; - /** - * right adornment - */ - rightAdornment?: ReactNode; - disabled?: boolean; - containerClassName?: string; -}; - -/** Simple input with variable styling (depending on mode) */ -export const TextInput: React.FC = ({ - mode = 'default', - disabled, - leftAdornment, - rightAdornment, - containerClassName, - ...props -}) => { - return ( - - {leftAdornment} - - - - {rightAdornment} - - ); -}; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled, containerClassName }) => { - let className = `${disabled ? 'bg-ui-100 border-ui-200 border-2' : 'bg-ui-0'} flex items-center focus-within:ring-2 - focus-within:ring-primary-500 - rounded-xl hover:border-ui-300 border-2 h-6 - active:border-primary-500 active:ring-0 `; - - if (containerClassName) { - className += containerClassName; - } - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; - -export const StyledInput = styled.input.attrs(() => { - const className: string | undefined = 'w-full bg-transparent h-4 truncate'; - return { className }; -})` - outline: 0; -`; - -type StyledInputWrapper = Pick; - -const InputWrapper = styled.div.attrs(({ leftAdornment }) => ({ - className: `py-1.5 ${leftAdornment ? 'pr-2' : 'px-2'} w-full`, -}))``; diff --git a/src/components/input/timeInput.stories.tsx b/src/components/input/timeInput.stories.tsx deleted file mode 100644 index 4efced9f7..000000000 --- a/src/components/input/timeInput.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { TimeInput, type TimeInputProps } from './timeInput'; - -export default { - title: 'Components/Input/Time', - component: TimeInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState('12:23'); - return setValue(nextValue)} />; -}; - -export const Time = Template.bind({}); -Time.args = { - mode: 'default', -}; diff --git a/src/components/input/timeInput.test.tsx b/src/components/input/timeInput.test.tsx deleted file mode 100644 index 9b6ea1383..000000000 --- a/src/components/input/timeInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { TimeInput } from './timeInput'; - -describe('TimeInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('time-input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/timeInput.tsx b/src/components/input/timeInput.tsx deleted file mode 100644 index 59c0921d6..000000000 --- a/src/components/input/timeInput.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useMemo } from 'react'; -import { styled } from 'styled-components'; - -import { ButtonGroup, Option } from '../button/buttonGroup'; - -export type valueType = { time: string; midday: 'pm' | 'am' }; - -export type TimeInputProps = Omit, 'onChange'> & { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - disabled?: boolean; - onChange: (value: string) => void; - width?: number; - value: string; -}; - -export const TimeInput: React.FC = ({ - mode = 'default', - disabled, - width, - value, - onChange: onChangeCallback, - ...props -}) => { - const midday = useMemo(() => { - const hours = Number(value?.match(/^(\d+)/)?.[1]); - return hours > 11 ? 'pm' : 'am'; - }, [value]); - - const onChange = (nextValue: React.FormEvent | string, type: 'time' | 'midday') => { - if (type === 'time') { - const currentTarget = (nextValue as React.FormEvent).target; - - const hours = Number((currentTarget as HTMLInputElement).value.match(/^(\d+)/)?.[1]); - - const minutes = Number((currentTarget as HTMLInputElement).value.match(/:(\d+)/)?.[1]); - - let sHours = hours.toString(); - let sMinutes = minutes.toString(); - if (hours < 10) { - sHours = `0${sHours}`; - } - if (minutes < 10) { - sMinutes = `0${sMinutes}`; - } - - onChangeCallback(`${sHours}:${sMinutes}`); - } else { - let hours = Number(value.match(/^(\d+)/)?.[1]); - const minutes = Number(value.match(/:(\d+)/)?.[1]); - - if (nextValue === 'am' && hours > 12) { - hours = hours - 12; - } - - if (nextValue === 'pm' && hours < 12) { - hours = hours + 12; - } - - let sHours = hours.toString(); - let sMinutes = minutes.toString(); - if (hours < 10) { - sHours = `0${sHours}`; - } - if (minutes < 10) { - sMinutes = `0${sMinutes}`; - } - - onChangeCallback(`${sHours}:${sMinutes}`); - } - }; - - return ( - - onChange(e, 'time')} - type="time" - value={value} - required - /> - {/* TODO: This Radio button need to be customized. For now we used a - default Radio button but it should update soon - */} - onChange(e, 'midday')} value={midday}> - - - ); -}; - -export type StyledContainerProps = Pick; - -const Container = styled.div.attrs(({ mode, disabled, width }) => { - let className = `${disabled ? 'bg-ui-100' : 'bg-ui-0'} inline-flex p-1 bg-ui-0 ${ - width ? '' : 'w-30' - } focus:outline-none items-center font-normal - focus-within:ring-2 focus-within:ring-primary-500 justify-between - rounded-xl hover:border-ui-300 border-2 active:border-primary-500 - active:ring-0 - `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { - className, - ...(width && { style: { width: `${width}px` } }), - }; -})``; - -const StyledTimeInput = styled.input.attrs(({ disabled }) => { - const className: string | undefined = `${ - disabled ? 'text-ui-300' : 'text-ui-600' - } bg-transparent focus:outline-none margin-0 w-full`; - - return { - className, - }; -})` - ::-webkit-calendar-picker-indicator { - display: none; - } - ::-webkit-datetime-edit-ampm-field { - display: none; - } - - outline: 0; -`; diff --git a/src/components/input/valueInput.stories.tsx b/src/components/input/valueInput.stories.tsx deleted file mode 100644 index 7d12516f5..000000000 --- a/src/components/input/valueInput.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { ValueInput, type ValueInputProps } from './valueInput'; - -export default { - title: 'Components/Input/Value', - component: ValueInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Value = Template.bind({}); -Value.args = { - adornmentText: 'Max', - onAdornmentClick: () => alert('Button clicked'), - mode: 'default', - disabled: false, - placeholder: 'Placeholder', -}; diff --git a/src/components/input/valueInput.test.tsx b/src/components/input/valueInput.test.tsx deleted file mode 100644 index 2b3e6c4c2..000000000 --- a/src/components/input/valueInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { ValueInput } from './valueInput'; - -describe('ValueInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input-value'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/valueInput.tsx b/src/components/input/valueInput.tsx deleted file mode 100644 index c8997fc13..000000000 --- a/src/components/input/valueInput.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { ButtonText } from '../button'; -import { StyledInput } from './textInput'; - -export type ValueInputProps = React.InputHTMLAttributes & { - /** Text that appears on the button present on the right side of the input; if no text - * is provided, the button will not be rendered */ - adornmentText?: string; - /** Handler for when the button present on the right side of the input is - * clicked */ - onAdornmentClick?: () => void; - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; -}; - -export const ValueInput = React.forwardRef( - ({ mode = 'default', disabled = false, adornmentText = '', onAdornmentClick, ...props }, ref) => ( - - { - e.preventDefault(); - (e.target as HTMLInputElement).blur(); - }} - /> - {adornmentText && ( - - )} - - ), -); - -ValueInput.displayName = 'ValueInput'; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled }) => { - let className = `${ - disabled ? 'bg-ui-100 border-ui-200' : 'bg-ui-0' - } flex items-center space-x-1.5 p-0.75 pl-2 text-ui-600 rounded-xl - border-2 focus-within:ring-2 focus-within:ring-primary-500 - hover:border-ui-300 active:border-primary-500 active:ring-0 `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; diff --git a/src/components/input/walletInput.stories.tsx b/src/components/input/walletInput.stories.tsx deleted file mode 100644 index bca35d4dc..000000000 --- a/src/components/input/walletInput.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { WalletInput, type WalletInputProps, type WalletInputValue } from './walletInput'; - -export default { - title: 'Components/Input/Wallet', - component: WalletInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState({ - address: '', - ensName: '', - }); - - return ; -}; - -export const Default = Template.bind({}); -Default.args = { - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; - -export const AddressOnly = Template.bind({}); -AddressOnly.args = { - placeholder: '0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', -}; - -Default.args = { - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; diff --git a/src/components/input/walletInput.test.tsx b/src/components/input/walletInput.test.tsx deleted file mode 100644 index d60a1be77..000000000 --- a/src/components/input/walletInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { WalletInput } from './walletInput'; - -describe.skip('WalletInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input-wallet'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/walletInput.tsx b/src/components/input/walletInput.tsx deleted file mode 100644 index 0a5e4ea1f..000000000 --- a/src/components/input/walletInput.tsx +++ /dev/null @@ -1,531 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactEventHandler } from 'react'; -import { styled } from 'styled-components'; - -import { IsAddress, isEnsDomain, shortenAddress, shortenENS } from '../../utils/addresses'; -import { ButtonIcon, ButtonText } from '../button'; -import { IconCopy, IconLinkExternal } from '../icons'; - -/** Input Wallet value type */ -export type WalletInputValue = { - ensName: string; - address: string; -}; - -// Toggle type for value to show in textarea input -type DisplayMode = 'address' | 'ensName'; - -/** - * WalletInputProps is a type that defines the properties for a wallet input component. - * It extends the properties of an HTMLTextAreaElement, except for 'value' and 'onChange'. - */ -export type WalletInputProps = Omit, 'value' | 'onChange'> & { - /** Input field props */ - /** - * The current value of the input field. Note that this is the full value. - */ - value: WalletInputValue; - - /** - * A callback function that is called when the value of the input field changes. - * It takes the new value as an argument. - */ - onValueChange: (newValue: WalletInputValue) => void; - - /** - * Changes the input's color schema. - */ - state?: 'success' | 'warning' | 'critical'; - - /** Button event handlers */ - /** - * An optional event handler that is called when the toggle button is clicked. - */ - onToggleButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the clear button is clicked. - */ - onClearButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the paste button is clicked. - */ - onPasteButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the copy button is clicked. - */ - onCopyButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the view explorer button is clicked. - */ - onViewExplorerButtonClick?: (e: React.MouseEvent, addressOrEns: string) => void; - - /** - * The URL to be used for opening the ENS name and address in an external block explorer. - * This requires a format where the ENS name or address can be appended to the end of the - * given URL - */ - blockExplorerURL?: string; - - /** ENS and address resolvers */ - /** - * Function to get ENS subdomain using an address. - */ - resolveEnsNameFromAddress?: (address: string | Promise) => Promise; - - /** - * Function to get address from an ENS subdomain. - */ - resolveAddressFromEnsName?: (ensName: string | Promise) => Promise; - - /** - * An optional event handler to be called when the corresponding address has been found - */ - onEnsResolved?: (ensName: string | null) => void; - - /** - * An optional event handler to be called when the address has been validated - */ - onAddressValidated?: (address: string | null) => void; - - /** - * An optional event handler to be called when an error occurs while resolving - * an address or ENS name - */ - onResolvingError?: (error: Error) => void; -}; - -export const WalletInput = React.forwardRef( - ( - { - state, - value, - disabled, - blockExplorerURL, - onFocus, - onWheel, - onValueChange, - onToggleButtonClick, - onClearButtonClick, - onPasteButtonClick, - onCopyButtonClick, - onViewExplorerButtonClick, - resolveEnsNameFromAddress, - resolveAddressFromEnsName, - onAddressValidated, - onEnsResolved, - onResolvingError, - ...props - }, - ref, - ) => { - const textareaRef = useRef(null); - const wasNotEditingRef = useRef(true); - - const [truncate, setTruncate] = useState(false); - const [isEditing, setIsEditing] = useState(false); - const [displayMode, setDisplayMode] = useState(() => (value.ensName ? 'ensName' : 'address')); - const [initialHeight, setInitialHeight] = useState(0); - - const canToggle = !!value.address && !!value.ensName; - const togglerLabel = displayMode === 'address' ? 'ENS' : '0x…'; - const ensSupported = !!resolveAddressFromEnsName && !!resolveEnsNameFromAddress; - - // holds the full format of the potentially shortened value in the input - const fullValue: string = useMemo(() => { - return String(displayMode === 'address' ? value.address : value.ensName); - }, [displayMode, value.address, value.ensName]); - - // Only show see on scan button if the input is valid - const showExternalButton = blockExplorerURL && (IsAddress(fullValue) || isEnsDomain(fullValue)); - const adornmentsDisabled = disabled && !fullValue; - - // This displays the truncated address/ens when the value is not being - // edited by the user, or in the case of ens, when the length of the name - // would have otherwise overflown - const displayedValue = useMemo(() => { - // show full value if user is editing - if (isEditing) { - return fullValue; - } - - if (displayMode === 'address') { - return shortenAddress(value.address); - } - - // Get the current height and compare it with the initial height. - // because the input row is set to 1, when the input gets filled, - // the height is being adjusted so that the overflow is not hidden. - // The height being modified means that the text would have otherwise - // wrapped/overflown. - if (getTextAreaHeight(textareaRef.current) > initialHeight || truncate) { - setTruncate(false); - return shortenENS(value.ensName); - } else { - return value.ensName as string; - } - }, [displayMode, fullValue, initialHeight, isEditing, truncate, value.address, value.ensName]); - - /************************************************* - * Hooks & Effects * - *************************************************/ - useEffect(() => { - // Use the isActive flag to avoid racing conditions when changing the input value - // and resolving the ENS names or addresses - let isActive = true; - - async function resolveValues() { - const newValue = { ...value }; - - if (displayMode === 'address') { - try { - // only fetch when it's a valid address - if (IsAddress(fullValue)) { - onAddressValidated?.(fullValue); - - // resolve ens name - const result = await resolveEnsNameFromAddress?.(fullValue); - newValue.ensName = result?.toLowerCase() ?? ''; - } - } catch (error) { - onResolvingError?.(error as Error); - newValue.ensName = ''; - } - } else if (resolveAddressFromEnsName) { - try { - // only fetch when it's a valid ens - if (isEnsDomain(fullValue)) { - const result = await resolveAddressFromEnsName?.(fullValue); - newValue.address = result?.toLowerCase() ?? ''; - - // wait until the corresponding ens value is resolved - newValue.address && onEnsResolved?.(value.address); - } - } catch (error) { - onResolvingError?.(error as Error); - newValue.address = ''; - } - } - - const didChange = value.address !== newValue.address || value.ensName !== newValue.ensName; - if (isActive && didChange) { - onValueChange(newValue); - } - } - - if (ensSupported && value[displayMode]) { - resolveValues(); - } - - return () => { - isActive = false; - }; - }, [ - displayMode, - ensSupported, - fullValue, - onAddressValidated, - onEnsResolved, - onResolvingError, - resolveAddressFromEnsName, - resolveEnsNameFromAddress, - onValueChange, - value, - ]); - - // resolve the forwarded ref and local ref - useEffect(() => { - if (typeof ref === 'function') { - ref(textareaRef.current); - } else if (ref) { - (ref as React.MutableRefObject).current = textareaRef.current; - } - }, [ref]); - - // adjust textarea height so that it grows as filled - useEffect(() => { - if (textareaRef.current) { - // get the initial height of the text area - if (textareaRef.current.style.height !== null) { - setInitialHeight((prev) => { - if (prev) { - return prev; - } else { - return getTextAreaHeight(textareaRef.current); - } - }); - } - - // adjust height so input grows as filled - textareaRef.current.style.height = 'auto'; - textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; - } - }, [isEditing, value, displayedValue]); - - // select text on focus, this needs to be done here instead of onFocus because - // updating the isEditing state will remove the focus when the component re-renders - useEffect(() => { - if (wasNotEditingRef && isEditing) { - textareaRef.current?.select(); - } - }, [isEditing]); - - useEffect(() => { - if (!isEditing) { - if (getTextAreaHeight(textareaRef.current) > initialHeight) { - setTruncate(true); - } - } - }, [initialHeight, isEditing, displayedValue]); - - // Update wallet display mode on value change - useEffect(() => { - if (IsAddress(value.address) || !ensSupported || value.address.startsWith('0x')) { - setDisplayMode('address'); - } else { - setDisplayMode('ensName'); - } - }, [value.address, ensSupported]); - - /************************************************* - * Callbacks and handlers * - *************************************************/ - // Show ens or address - const toggleDisplayMode = useCallback( - (event: React.MouseEvent) => { - const newDisplayMode: DisplayMode = displayMode === 'address' ? 'ensName' : 'address'; - - setDisplayMode(newDisplayMode); - onToggleButtonClick?.(event); - }, - [displayMode, onToggleButtonClick], - ); - - const handleContainerBlur = useCallback((event: React.FocusEvent) => { - event.preventDefault(); - setIsEditing(false); - wasNotEditingRef.current = false; - }, []); - - const handleFocus = useCallback( - (event: React.FocusEvent) => { - setIsEditing(true); - wasNotEditingRef.current = true; - onFocus?.(event); - }, - [onFocus], - ); - - const handleOnWheel = useCallback( - (event: React.WheelEvent) => { - event.preventDefault(); - event.currentTarget.blur(); - onWheel?.(event); - }, - [onWheel], - ); - - const setValue = useCallback( - (addressOrEns: string) => { - const newValue = { ensName: '', address: '' }; - - if (IsAddress(addressOrEns) || !ensSupported || addressOrEns.startsWith('0x')) { - newValue.address = addressOrEns.toLowerCase(); - } else { - newValue.ensName = addressOrEns.toLowerCase(); - } - - return newValue; - }, - [ensSupported], - ); - - const handleChange = useCallback( - (event: React.ChangeEvent) => { - onValueChange(setValue(event.target.value)); - }, - - [onValueChange, setValue], - ); - - const handleClearInput = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - onValueChange(setValue('')); - setIsEditing(true); - onClearButtonClick?.(event); - }, - [onClearButtonClick, onValueChange, setValue], - ); - - const handlePasteFromClipboard = useCallback( - async (event: React.MouseEvent) => { - try { - const clipboardData = await navigator.clipboard.readText(); - - setIsEditing(false); - onValueChange(setValue(clipboardData)); - onPasteButtonClick?.(event); - } catch (err) { - // eslint-disable-next-line no-console - console.error('Failed to read clipboard contents: ', err); - } - }, - [onPasteButtonClick, onValueChange, setValue], - ); - - const handleCopyToClipboard = useCallback( - (event: React.MouseEvent) => { - navigator.clipboard.writeText((displayMode === 'address' ? value.address : value.ensName) || ''); - onCopyButtonClick?.(event); - }, - [displayMode, onCopyButtonClick, value.address, value.ensName], - ); - - const handleViewOnExplorer = useCallback( - (event: React.MouseEvent) => { - window.open(blockExplorerURL + fullValue); - onViewExplorerButtonClick?.(event, fullValue); - }, - [blockExplorerURL, fullValue, onViewExplorerButtonClick], - ); - - /************************************************* - * Render * - *************************************************/ - return ( - <> - - - - - -
- {!displayedValue && ( - - )} - {displayedValue && isEditing && ( - - )} - - {displayedValue && !isEditing && ( - - {canToggle && ( - - )} - } - mode="secondary" - size="small" - bgWhite - onClick={handleCopyToClipboard} - disabled={adornmentsDisabled} - /> - {showExternalButton && ( - } - mode="secondary" - size="small" - bgWhite - disabled={adornmentsDisabled} - onClick={handleViewOnExplorer} - /> - )} - - )} -
- - - ); - }, -); - -WalletInput.displayName = 'WalletInput'; - -function getTextAreaHeight(element: HTMLTextAreaElement | null) { - if (element === null) { - return 0; - } - - return Number(element.style.height.split('px')[0]); -} - -export const StyledInput = styled.textarea.attrs(() => { - const baseClassName = - 'w-full items-center appearance-none bg-transparent border-none outline-none resize-none font-inherit p-0 m-0'; - const disabledClassName = 'disabled:cursor-not-allowed'; - - const className: string | undefined = `${baseClassName} ${disabledClassName}`; - - return { className }; -})``; - -export const InputWrapper = styled.div.attrs({ - className: 'flex items-center w-full', -})``; - -type StyledContainerProps = Pick; - -const AdornmentWrapper = styled.div.attrs(() => { - const className = 'flex items-center space-x-0.75 border-blue-600'; - - return { className }; -})``; - -const modeStyles = (state: WalletInputProps['state']) => { - switch (state) { - case 'success': - return 'border-success-600'; - case 'warning': - return 'border-warning-600'; - case 'critical': - return 'border-critical-600'; - default: - return 'border-ui-100'; - } -}; - -export const Container = styled.div.attrs(({ state, disabled }) => { - const baseClassName = 'border-2 flex space-x-1.5 py-0.75 pr-1 pl-2 rounded-xl'; - const modeClassName = modeStyles(state); - - const focusClass = disabled ? '' : 'focus-within:ring-2 focus-within:ring-primary-500'; - - const bgAndBorderColor = disabled ? 'bg-ui-100 border-ui-200 text-ui-700' : 'bg-ui-0 text-ui-600'; - - return { - className: `${baseClassName} ${modeClassName} ${bgAndBorderColor} ${focusClass}`, - }; -})``; diff --git a/src/components/input/walletInputLegacy.tsx b/src/components/input/walletInputLegacy.tsx deleted file mode 100644 index f0c59e25c..000000000 --- a/src/components/input/walletInputLegacy.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import { ButtonText } from '../button'; -import { StyledInput } from './textInput'; - -export type WalletInputLegacyProps = React.InputHTMLAttributes & { - /** Text that appears on the button present on the right side of the input; if no text - * is provided, the button will not be rendered */ - adornmentText?: string; - /** Handler for when the button present on the right side of the input is - * clicked */ - onAdornmentClick?: () => void; - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - /** Disable the input but keep the adornment button active */ - disabledFilled?: boolean; -}; - -export const WalletInputLegacy = React.forwardRef( - ( - { mode = 'default', disabled = false, disabledFilled = false, adornmentText = '', onAdornmentClick, ...props }, - ref, - ) => ( - - { - e.preventDefault(); - (e.target as HTMLInputElement).blur(); - }} - /> - {adornmentText && ( - - )} - - ), -); - -WalletInputLegacy.displayName = 'WalletInputLegacy'; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled }) => { - let className = `${ - disabled ? 'bg-ui-100 border-ui-200' : 'bg-ui-0' - } flex items-center space-x-1.5 p-0.75 pl-2 text-ui-600 rounded-xl - border-2 focus-within:ring-2 focus-within:ring-primary-500 - hover:border-ui-300 active:border-primary-500 active:ring-0 `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; diff --git a/src/components/label/index.ts b/src/components/label/index.ts deleted file mode 100644 index 301fbded1..000000000 --- a/src/components/label/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './label'; diff --git a/src/components/label/label.stories.tsx b/src/components/label/label.stories.tsx deleted file mode 100644 index 19883287c..000000000 --- a/src/components/label/label.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { Label, type LabelProps } from './label'; - -export default { - title: 'Components/Label', - component: Label, -} as Meta; - -const Template: Story = (args) =>