From 75b294deafac8e55ca399ff8da44053ad9058332 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 18 Oct 2021 22:02:16 +0200 Subject: [PATCH] release: @coreui/icons-react v2.0.0-rc.6 --- packages/icons-react/.eslintignore | 3 + packages/icons-react/.eslintrc.js | 37 ++++ packages/icons-react/.prettierignore | 1 + packages/icons-react/.prettierrc.js | 7 + packages/icons-react/CHANGELOG.md | 49 +++++ packages/icons-react/README.md | 91 ++++++++ packages/icons-react/package.json | 95 +++++++++ packages/icons-react/rollup.config.js | 35 ++++ packages/icons-react/src/CIcon.css | 78 +++++++ packages/icons-react/src/CIcon.tsx | 198 ++++++++++++++++++ .../icons-react/src/__tests__/CIcon.spec.tsx | 40 ++++ packages/icons-react/src/index.ts | 3 + packages/icons-react/tests/.eslintrc | 5 + packages/icons-react/tests/cif-AU.js | 1 + packages/icons-react/tests/logo.js | 28 +++ packages/icons-react/tsconfig.json | 25 +++ 16 files changed, 696 insertions(+) create mode 100644 packages/icons-react/.eslintignore create mode 100644 packages/icons-react/.eslintrc.js create mode 100644 packages/icons-react/.prettierignore create mode 100644 packages/icons-react/.prettierrc.js create mode 100644 packages/icons-react/CHANGELOG.md create mode 100644 packages/icons-react/README.md create mode 100644 packages/icons-react/package.json create mode 100644 packages/icons-react/rollup.config.js create mode 100644 packages/icons-react/src/CIcon.css create mode 100644 packages/icons-react/src/CIcon.tsx create mode 100644 packages/icons-react/src/__tests__/CIcon.spec.tsx create mode 100644 packages/icons-react/src/index.ts create mode 100644 packages/icons-react/tests/.eslintrc create mode 100644 packages/icons-react/tests/cif-AU.js create mode 100644 packages/icons-react/tests/logo.js create mode 100644 packages/icons-react/tsconfig.json diff --git a/packages/icons-react/.eslintignore b/packages/icons-react/.eslintignore new file mode 100644 index 000000000..e6cf4bc30 --- /dev/null +++ b/packages/icons-react/.eslintignore @@ -0,0 +1,3 @@ +{ + "ignorePatterns": [".eslintrc.js"] +} \ No newline at end of file diff --git a/packages/icons-react/.eslintrc.js b/packages/icons-react/.eslintrc.js new file mode 100644 index 000000000..b822b573f --- /dev/null +++ b/packages/icons-react/.eslintrc.js @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict' + +module.exports = { + root: true, // So parent files don't get applied + env: { + es6: true, + browser: true, + node: true, + }, + extends: [ + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + plugins: ['@typescript-eslint', 'react', 'react-hooks'], + settings: { + react: { + pragma: 'React', + version: 'detect', + }, + }, +} diff --git a/packages/icons-react/.prettierignore b/packages/icons-react/.prettierignore new file mode 100644 index 000000000..849ddff3b --- /dev/null +++ b/packages/icons-react/.prettierignore @@ -0,0 +1 @@ +dist/ diff --git a/packages/icons-react/.prettierrc.js b/packages/icons-react/.prettierrc.js new file mode 100644 index 000000000..415ca0578 --- /dev/null +++ b/packages/icons-react/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + semi: false, + trailingComma: "all", + singleQuote: true, + printWidth: 100, + tabWidth: 2 +}; \ No newline at end of file diff --git a/packages/icons-react/CHANGELOG.md b/packages/icons-react/CHANGELOG.md new file mode 100644 index 000000000..6e95d02bb --- /dev/null +++ b/packages/icons-react/CHANGELOG.md @@ -0,0 +1,49 @@ +### [@coreui/icons-react](https://coreui.io/) changelog + +##### `1.1.0` +- chore: update to React 17 + +##### `1.0.0` - `1.0.3` +- refactor: improve 'unregistered icon' error message +- fix: change 'replaceAll' func to 'replace' due to transpilation error +- test: more coverage +- fix: typings +- fix: tests, lint, export +- refactor: cleanup +- chore: dependencies update + +##### `1.0.0-alpha.3` +- test: add missing tests +- refactor: cleanup +- chore: dependencies update and cleanup + +##### `1.0.0-alpha.0` +- initial version + +install: +```bash +npm install @coreui/icons-react +``` + +import: +```jsx +import { CIcon, CIconRaw } from '@coreui/icons-react'; +import { cifAu } from '@coreui/icons'; +``` +```scss +@import '~@coreui/icons/css/all.css'; +``` + +usage: +```jsx +... +class CoreUIIcons extends Component { +... +render() { + return ( + + + ) +} +... +``` diff --git a/packages/icons-react/README.md b/packages/icons-react/README.md new file mode 100644 index 000000000..5a2368d6f --- /dev/null +++ b/packages/icons-react/README.md @@ -0,0 +1,91 @@ +

+ + CoreUI Icons logo + +

+ +

+ Official React.js component for CoreUI Icons and CoreUI Icons PRO. +
+ Explore CoreUI Icons for React docs » +
+
+ Report bug + · + Request feature + · + Community + · + Blog +

+ + +## Status +[![npm package][npm-badge]][npm] +[![NPM downloads][npm-download]][npm] +![react](https://img.shields.io/badge/react-^17.0.2-lightgrey.svg?style=flat-square&logo=react) + + +[npm-badge]: https://img.shields.io/npm/v/@coreui/icons-react/latest?style=flat-square +[npm]: https://www.npmjs.com/package/@coreui/icons-react +[npm-download]: https://img.shields.io/npm/dm/@coreui/icons-react.svg?style=flat-square + +## Installation + +```bash +npm install @coreui/icons +npm install @coreui/icons-react@next +``` + +or + +```bash +yarn add @coreui/icons +yarn add @coreui/icons-react@next +``` + +## Use + +### Single icon + +```jsx +import { CIcon } from '@coreui/icons-react'; +import { cifAU } from '@coreui/icons'; + +... +render() { + return ( + + ) +} +... +``` + +### All icons + +```jsx +import { CIcon } from '@coreui/icons-react'; +import * as icon from '@coreui/icons'; + +... +render() { + return ( + + ) +} +... +``` + + +## API + +| property | type | description | +| --- | --- | --- | +| className | `string` | A string of all className you want applied to the component. | +| customClassName | `string` \| `object` \| `string[]` | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | +| icon | `string` \| `string[]` | Name of the icon placed in React object or SVG content. | +| height | `number` | The height attribute defines the vertical length of an icon. | +| size | `sm` \| `md` \|`lg` \| `xl` \| `xxl` \| `3xl` \| `4xl` \| `5xl` \| `6xl` \| `7xl` \| `8xl` \| `9xl` | Size of the icon. | +| use | `string` | If defined component will be rendered using `use` tag. | +| title | `string` | Title tag content. | +| width | `number` | The width attribute defines the horizontal length of an icon. | diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json new file mode 100644 index 000000000..f62796d67 --- /dev/null +++ b/packages/icons-react/package.json @@ -0,0 +1,95 @@ +{ + "name": "@coreui/icons-react", + "description": "Official React component for CoreUI Icons", + "version": "2.0.0-rc.6", + "license": "MIT", + "homepage": "https://icons.coreui.io", + "author": { + "name": "CoreUI", + "url": "https://coreui.io", + "github": "https://github.com/coreui", + "twitter": "https://twitter.com/core_ui" + }, + "contributors": [ + { + "name": "CoreUI Team", + "url": "https://github.com/orgs/coreui/people" + } + ], + "repository": { + "type": "git", + "url": "https://github.com/coreui/coreui-icons.git" + }, + "bugs": { + "url": "https://github.com/coreui/coreui-icons/issues" + }, + "main": "dist/index.js", + "module": "dist/index.es.js", + "jsnext:main": "dist/index.es.js", + "typings": "dist/index.d.ts", + "files": [ + "dist/", + "README.md" + ], + "scripts": { + "build": "rollup -c", + "lint": "eslint \"src/**/*.{js,ts,tsx}\"", + "test": "jest --coverage", + "test:update": "jest --coverage --updateSnapshot" + }, + "peerDependencies": { + "react": "^17" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^21.0.0", + "@rollup/plugin-node-resolve": "^13.0.5", + "@rollup/plugin-typescript": "^8.3.0", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^12.1.2", + "@types/react": "^17.0.30", + "@types/react-dom": "^17.0.9", + "@typescript-eslint/eslint-plugin": "^5.0.0", + "@typescript-eslint/parser": "^5.0.0", + "classnames": "^2.3.1", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.26.1", + "eslint-plugin-react-hooks": "^4.2.0", + "jest": "^27.3.0", + "prettier": "^2.4.1", + "prop-types": "^15.7.2", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "rollup": "^2.56.2", + "rollup-plugin-import-css": "^3.0.2", + "rollup-plugin-peer-deps-external": "^2.2.4", + "ts-jest": "^27.0.7", + "typescript": "^4.4.4" + }, + "keywords": [ + "coreui", + "coreui-icons", + "coreui-react", + "icons", + "svg", + "svg-icons", + "layout", + "component", + "react" + ], + "jest": { + "moduleNameMapper": { + "\\.(css|scss)$": "/test/styleMock.js" + }, + "preset": "ts-jest", + "testEnvironment": "jsdom", + "testPathIgnorePatterns": [ + "dist/" + ], + "transform": { + ".*\\.(js)$": "ts-jest", + ".*\\.(tsx)$": "ts-jest" + } + } +} diff --git a/packages/icons-react/rollup.config.js b/packages/icons-react/rollup.config.js new file mode 100644 index 000000000..bef526565 --- /dev/null +++ b/packages/icons-react/rollup.config.js @@ -0,0 +1,35 @@ +import commonjs from '@rollup/plugin-commonjs' +import external from 'rollup-plugin-peer-deps-external' +import resolve from '@rollup/plugin-node-resolve' +import typescript from '@rollup/plugin-typescript' +import css from 'rollup-plugin-import-css' +import pkg from './package.json' +export default { + input: 'src/index.ts', + output: [ + { + file: pkg.main, + format: 'cjs', + exports: 'named', + sourcemap: true, + }, + { + file: pkg.module, + format: 'es', + exports: 'named', + sourcemap: true, + }, + ], + plugins: [ + css(), + external(), + resolve(), + typescript({ + exclude: ['**/__tests__/**'], + tsconfig: './tsconfig.json', + }), + commonjs({ + include: ['../../node_modules/**'], + }), + ], +} diff --git a/packages/icons-react/src/CIcon.css b/packages/icons-react/src/CIcon.css new file mode 100644 index 000000000..1ce713d7e --- /dev/null +++ b/packages/icons-react/src/CIcon.css @@ -0,0 +1,78 @@ +.icon { + display: inline-block; + color: inherit; + text-align: center; + fill: currentColor; +} + +.icon:not(.icon-c-s):not(.icon-custom-size) { + width: 1rem; + height: 1rem; + font-size: 1rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl { + width: 2rem; + height: 2rem; + font-size: 2rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl { + width: 3rem; + height: 3rem; + font-size: 3rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl { + width: 4rem; + height: 4rem; + font-size: 4rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl { + width: 5rem; + height: 5rem; + font-size: 5rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl { + width: 6rem; + height: 6rem; + font-size: 6rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl { + width: 7rem; + height: 7rem; + font-size: 7rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl { + width: 8rem; + height: 8rem; + font-size: 8rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl { + width: 9rem; + height: 9rem; + font-size: 9rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl { + width: 1.5rem; + height: 1.5rem; + font-size: 1.5rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg { + width: 1.25rem; + height: 1.25rem; + font-size: 1.25rem; +} + +.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm { + width: 0.875rem; + height: 0.875rem; + font-size: 0.875rem; +} \ No newline at end of file diff --git a/packages/icons-react/src/CIcon.tsx b/packages/icons-react/src/CIcon.tsx new file mode 100644 index 000000000..6f9010cfc --- /dev/null +++ b/packages/icons-react/src/CIcon.tsx @@ -0,0 +1,198 @@ +import PropTypes from 'prop-types' +import React, { HTMLAttributes, forwardRef, useState, useMemo } from 'react' +import classNames from 'classnames' +import './CIcon.css' + +export interface CIconProps extends HTMLAttributes { + /** + * A string of all className you want applied to the component. + */ + className?: string + /** + * Use `icon={...}` instead of + * + * @deprecated since version 3.0 + */ + content?: string | string[] + /** + * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + */ + customClassName?: string | object | string[] // eslint-disable-line @typescript-eslint/ban-types + /** + * Name of the icon placed in React object or SVG content. + */ + icon?: string | string[] + /** + * The height attribute defines the vertical length of an icon. + */ + height?: number + /** + * Use `icon="..."` instead of + * + * @deprecated since version 3.0 + */ + name?: string + /** + * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. + */ + size?: + | 'custom' + | 'custom-size' + | 'sm' + | 'lg' + | 'xl' + | 'xxl' + | '3xl' + | '4xl' + | '5xl' + | '6xl' + | '7xl' + | '8xl' + | '9xl' + /** + * If defined component will be rendered using 'use' tag. + */ + use?: string + /** + * Title tag content. + */ + title?: string + /** + * The width attribute defines the horizontal length of an icon. + */ + width?: number +} + +const toCamelCase = (str: string) => { + return str + .replace(/([-_][a-z0-9])/gi, ($1) => { + return $1.toUpperCase() + }) + .replace(/-/gi, '') +} + +export const CIcon = forwardRef( + ( + { className, content, customClassName, height, icon, name, size, title, use, width, ...rest }, + ref, + ) => { + const [change, setChange] = useState(0) + const _icon = icon || content || name + + if (content) { + process && + process.env && + process.env.NODE_ENV === 'development' && + console.warn( + '[CIcon] The `content` property is deprecated and will be removed in v3, please use `icon={...}` instead of.', + ) + } + if (name) { + process && + process.env && + process.env.NODE_ENV === 'development' && + console.warn( + '[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.', + ) + } + + useMemo(() => setChange(change + 1), [_icon, JSON.stringify(_icon)]) + + const iconName = useMemo( + () => + _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon, + [change], + ) + + const titleCode = title ? `${title}` : '' + + const code = useMemo(() => { + if (Array.isArray(_icon)) { + return _icon + } + if (typeof _icon === 'string' && React['icons']) { + return React['icons'][iconName] + } + }, [change]) + + const iconCode = useMemo(() => { + return Array.isArray(code) ? code[1] || code[0] : code + }, [change]) + + const scale = (() => { + return Array.isArray(code) && code.length > 1 ? code[0] : '64 64' + })() + + const viewBox = (() => { + return rest['viewBox'] || `0 0 ${scale}` + })() + + // render + + const _className = customClassName + ? classNames(customClassName) + : classNames( + 'icon', + { + [`icon-${size}`]: size, + [`icon-custom-size`]: height || width, + }, + className, + ) + + return use ? ( + + + + ) : ( + + ) + }, +) + +CIcon.propTypes = { + className: PropTypes.string, + content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), + customClassName: PropTypes.string, + height: PropTypes.number, + icon: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), + name: PropTypes.string, + size: PropTypes.oneOf([ + 'custom', + 'custom-size', + 'sm', + 'lg', + 'xl', + 'xxl', + '3xl', + '4xl', + '5xl', + '6xl', + '7xl', + '8xl', + '9xl', + ]), + title: PropTypes.any, + use: PropTypes.any, + width: PropTypes.number, +} + +CIcon.displayName = 'CIcon' diff --git a/packages/icons-react/src/__tests__/CIcon.spec.tsx b/packages/icons-react/src/__tests__/CIcon.spec.tsx new file mode 100644 index 000000000..286eafca3 --- /dev/null +++ b/packages/icons-react/src/__tests__/CIcon.spec.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom/extend-expect' +import CIcon from './../' + +// import { cifAu } from './../../../icons/js/flag/cif-au' + +describe('CIcon', () => { + + it('renders svg with class="icon"', () => { + const { container } = render() + expect(container.firstChild).toHaveClass('icon') + }) + + // it('renders svg with icon', () => { + // const { container } = render() + // expect(container.firstChild).toContain(cifAu[1]) + // // expect(render()).toContain(cifAu) + // }) + + it('renders svg with size', () => { + const { container } = render() + expect(container.firstChild).toHaveClass('icon-xl') + }) + + it('renders svg with custom size', () => { + const { container } = render() + expect(container.firstChild).toHaveClass('icon-custom-size') + }) + + it('renders svg with className', () => { + const { container } = render() + expect(container.firstChild).toHaveClass('icon-test') + }) + + // it('renders with ', () => { + // const { container } = render() + // expect(container.firstChild?.firstChild).toContain('') + // }) +}) diff --git a/packages/icons-react/src/index.ts b/packages/icons-react/src/index.ts new file mode 100644 index 000000000..5ebb4bcc6 --- /dev/null +++ b/packages/icons-react/src/index.ts @@ -0,0 +1,3 @@ +import { CIcon } from './CIcon' + +export default CIcon diff --git a/packages/icons-react/tests/.eslintrc b/packages/icons-react/tests/.eslintrc new file mode 100644 index 000000000..7eeefc33b --- /dev/null +++ b/packages/icons-react/tests/.eslintrc @@ -0,0 +1,5 @@ +{ + "env": { + "mocha": true + } +} diff --git a/packages/icons-react/tests/cif-AU.js b/packages/icons-react/tests/cif-AU.js new file mode 100644 index 000000000..38f251230 --- /dev/null +++ b/packages/icons-react/tests/cif-AU.js @@ -0,0 +1 @@ +export const cifAU = ["301 151",""] \ No newline at end of file diff --git a/packages/icons-react/tests/logo.js b/packages/icons-react/tests/logo.js new file mode 100644 index 000000000..138fabe52 --- /dev/null +++ b/packages/icons-react/tests/logo.js @@ -0,0 +1,28 @@ +export const logo = ['556 134', '']; + +/* + + + + + + + + + + + + + + + + + + + + + + + + + */ diff --git a/packages/icons-react/tsconfig.json b/packages/icons-react/tsconfig.json new file mode 100644 index 000000000..2eeb28c0c --- /dev/null +++ b/packages/icons-react/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "jsx": "react", + "outDir": "dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom", "es2016", "es2017"], + "sourceMap": true, + "allowJs": true, + "declaration": true, + "declarationDir": ".", + "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "esModuleInterop": true + }, + "include": ["src"], + "exclude": ["**/node_modules", "dist"] +} \ No newline at end of file