-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react): add PdsIcon helper (#126)
* feat(react): add PdsIcon helper * fix: include custom-elements in stencil.config * chore: add storybook-static to gitignore
- Loading branch information
1 parent
b07dbb5
commit 066cacc
Showing
17 changed files
with
236 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ docs.json | |
| loader/ | ||
| www/ | ||
|
|
||
| storybook-static/ | ||
| storybook-static | ||
|
|
||
| # IDEs and editors | ||
| .idea/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './index'; | ||
| export * from '../dist/types/interface'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "name": "@pine-ds/core/components", | ||
| "version": "0.0.0", | ||
| "description": "Pine Components exported as custom elements, extending HTMLElement.", | ||
| "main": "./index.js", | ||
| "types": "./custom-elements.d.ts", | ||
| "private": true, | ||
| "sideEffects": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,5 +4,8 @@ | |
| "module": "commonjs", | ||
| "resolveJsonModule": true, | ||
| "target": "es2017", | ||
| } | ||
| }, | ||
| "exclude": [ | ||
| "custom-elements" | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import typescript from '@rollup/plugin-typescript'; | ||
|
|
||
| export default { | ||
| input: 'src/index.ts', | ||
| output: [ | ||
| { | ||
| dir: 'dist/', | ||
| entryFileNames: '[name].js', | ||
| chunkFileNames: '[name]-[hash].js', | ||
| format: 'es', | ||
| sourcemap: true, | ||
| } | ||
| ], | ||
| external: (id) => !/^(\.|\/)/.test(id), | ||
| plugins: [ | ||
| typescript(), | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React, { PropsWithChildren } from 'react'; | ||
|
|
||
| import { PdsReactProps } from './PdsReactProps'; | ||
| import { PdsIconInner } from './inner-proxies'; | ||
|
|
||
| import { createForwardRef } from './react-component-lib/utils'; | ||
|
|
||
| interface PdsIconProps { | ||
| color?: string; | ||
| icon?: string; | ||
| name?: string; | ||
| size?: string; | ||
| } | ||
|
|
||
| type InternalProps = PropsWithChildren< | ||
| PdsIconProps & { | ||
| forwardedRef?: React.ForwardedRef<HTMLPdsIconElement>; | ||
| } | ||
| >; | ||
|
|
||
| class PdsIconContainer extends React.PureComponent<InternalProps> { | ||
| constructor(props: InternalProps) { | ||
| super(props); | ||
| if (this.props.name) { | ||
| console.warn( | ||
| 'In Pine React, you import icons from "@pine-ds/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.' | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const { icon, ...rest } = this.props; | ||
|
|
||
| return ( | ||
| <PdsIconInner ref={this.props.forwardedRef} icon={icon} {...rest}> | ||
| {this.props.children} | ||
| </PdsIconInner> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export const PdsIcon = createForwardRef<PdsIconProps & PdsReactProps, HTMLPdsIconElement>( | ||
| PdsIconContainer, | ||
| 'PdsIcon' | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export interface PdsReactProps { | ||
| className?: string; | ||
| style?: { [key: string]: any }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import type { JSX as PdsIconsJSX } from '@pine-ds/icons'; | ||
| import { defineCustomElement as definePdsIcon } from '@pine-ds/icons/components/pds-icon.js'; | ||
|
|
||
| import { createReactComponent } from './react-component-lib'; | ||
|
|
||
| // @pine-ds/icons | ||
| export const PdsIconInner = /*@__PURE__*/ createReactComponent<PdsIconsJSX.PdsIcon, HTMLPdsIconElement>( | ||
| 'pds-icon', | ||
| undefined, | ||
| undefined, | ||
| definePdsIcon | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from "./components/proxies"; | ||
| export { defineCustomElements } from '@pine-ds/core/loader'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.