Skip to content

Commit 36b8b12

Browse files
kripodkripod
committed
chore: initial commit
0 parents  commit 36b8b12

15 files changed

+456
-0
lines changed

‎.editorconfig‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.yml]
12+
indent_style = space
13+
14+
[*.md]
15+
trim_trailing_whitespace = false

‎.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
*.log*
2+
.DS_Store
3+
.idea/
4+
node_modules/

‎.prettierrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"useTabs": true,
3+
"trailingComma": "all",
4+
"overrides": [
5+
{
6+
"files": "*.md",
7+
"options": {
8+
"useTabs": false,
9+
"trailingComma": "none"
10+
}
11+
}
12+
]
13+
}

‎.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["EditorConfig.EditorConfig", "esbenp.prettier-vscode"]
3+
}

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.defaultFormatter": "esbenp.prettier-vscode",
3+
"editor.formatOnSave": true
4+
}

‎CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
## [1.0.0] - 2020-12-27
11+
12+
### Added
13+
14+
- `PolymorphicPropsWithoutRef` and `PolymorphicPropsWithRef` types for appending `as` to component props
15+
- `PolymorphicForwardRefExoticComponent`, `PolymorphicMemoExoticComponent` and `PolymorphicLazyExoticComponent` types to support exotic components
16+
17+
[unreleased]: https://github.com/kripod/react-polymorphic-types/compare/v1.0.0...HEAD
18+
[1.0.0]: https://github.com/kripod/react-polymorphic-types/releases/tag/v1.0.0

‎CODE_OF_CONDUCT.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
We as members, contributors, and leaders pledge to make participation in our
6+
community a harassment-free experience for everyone, regardless of age, body
7+
size, visible or invisible disability, ethnicity, sex characteristics, gender
8+
identity and expression, level of experience, education, socio-economic status,
9+
nationality, personal appearance, race, religion, or sexual identity
10+
and orientation.
11+
12+
We pledge to act and interact in ways that contribute to an open, welcoming,
13+
diverse, inclusive, and healthy community.
14+
15+
## Our Standards
16+
17+
Examples of behavior that contributes to a positive environment for our
18+
community include:
19+
20+
- Demonstrating empathy and kindness toward other people
21+
- Being respectful of differing opinions, viewpoints, and experiences
22+
- Giving and gracefully accepting constructive feedback
23+
- Accepting responsibility and apologizing to those affected by our mistakes,
24+
and learning from the experience
25+
- Focusing on what is best not just for us as individuals, but for the
26+
overall community
27+
28+
Examples of unacceptable behavior include:
29+
30+
- The use of sexualized language or imagery, and sexual attention or
31+
advances of any kind
32+
- Trolling, insulting or derogatory comments, and personal or political attacks
33+
- Public or private harassment
34+
- Publishing others' private information, such as a physical or email
35+
address, without their explicit permission
36+
- Other conduct which could reasonably be considered inappropriate in a
37+
professional setting
38+
39+
## Enforcement Responsibilities
40+
41+
Community leaders are responsible for clarifying and enforcing our standards of
42+
acceptable behavior and will take appropriate and fair corrective action in
43+
response to any behavior that they deem inappropriate, threatening, offensive,
44+
or harmful.
45+
46+
Community leaders have the right and responsibility to remove, edit, or reject
47+
comments, commits, code, wiki edits, issues, and other contributions that are
48+
not aligned to this Code of Conduct, and will communicate reasons for moderation
49+
decisions when appropriate.
50+
51+
## Scope
52+
53+
This Code of Conduct applies within all community spaces, and also applies when
54+
an individual is officially representing the community in public spaces.
55+
Examples of representing our community include using an official e-mail address,
56+
posting via an official social media account, or acting as an appointed
57+
representative at an online or offline event.
58+
59+
## Enforcement
60+
61+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
62+
reported to the community leaders responsible for enforcement at
63+
kripod@protonmail.com.
64+
All complaints will be reviewed and investigated promptly and fairly.
65+
66+
All community leaders are obligated to respect the privacy and security of the
67+
reporter of any incident.
68+
69+
## Enforcement Guidelines
70+
71+
Community leaders will follow these Community Impact Guidelines in determining
72+
the consequences for any action they deem in violation of this Code of Conduct:
73+
74+
### 1. Correction
75+
76+
**Community Impact**: Use of inappropriate language or other behavior deemed
77+
unprofessional or unwelcome in the community.
78+
79+
**Consequence**: A private, written warning from community leaders, providing
80+
clarity around the nature of the violation and an explanation of why the
81+
behavior was inappropriate. A public apology may be requested.
82+
83+
### 2. Warning
84+
85+
**Community Impact**: A violation through a single incident or series
86+
of actions.
87+
88+
**Consequence**: A warning with consequences for continued behavior. No
89+
interaction with the people involved, including unsolicited interaction with
90+
those enforcing the Code of Conduct, for a specified period of time. This
91+
includes avoiding interactions in community spaces as well as external channels
92+
like social media. Violating these terms may lead to a temporary or
93+
permanent ban.
94+
95+
### 3. Temporary Ban
96+
97+
**Community Impact**: A serious violation of community standards, including
98+
sustained inappropriate behavior.
99+
100+
**Consequence**: A temporary ban from any sort of interaction or public
101+
communication with the community for a specified period of time. No public or
102+
private interaction with the people involved, including unsolicited interaction
103+
with those enforcing the Code of Conduct, is allowed during this period.
104+
Violating these terms may lead to a permanent ban.
105+
106+
### 4. Permanent Ban
107+
108+
**Community Impact**: Demonstrating a pattern of violation of community
109+
standards, including sustained inappropriate behavior, harassment of an
110+
individual, or aggression toward or disparagement of classes of individuals.
111+
112+
**Consequence**: A permanent ban from any sort of public interaction within
113+
the community.
114+
115+
## Attribution
116+
117+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118+
version 2.0, available at
119+
[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
120+
121+
Community Impact Guidelines were inspired by
122+
[Mozilla's code of conduct enforcement ladder][mozilla coc].
123+
124+
For answers to common questions about this code of conduct, see the FAQ at
125+
[https://www.contributor-covenant.org/faq][faq]. Translations are available
126+
at [https://www.contributor-covenant.org/translations][translations].
127+
128+
[homepage]: https://www.contributor-covenant.org
129+
[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
130+
[mozilla coc]: https://github.com/mozilla/diversity
131+
[faq]: https://www.contributor-covenant.org/faq
132+
[translations]: https://www.contributor-covenant.org/translations

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2020 Kristóf Poduszló
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# react-polymorphic-types
2+
3+
Zero-runtime polymorphic component definitions for React
4+
5+
[![npm](https://img.shields.io/npm/v/react-polymorphic-types)](https://www.npmjs.com/package/react-polymorphic-types)
6+
[![npm bundle size](https://img.shields.io/bundlephobia/min/react-polymorphic-types)](https://bundlephobia.com/result?p=react-polymorphic-types)
7+
8+
## Motivation
9+
10+
Being a successor to [react-polymorphic-box](https://github.com/kripod/react-polymorphic-box), this project offers more accurate typings with less overhead.
11+
12+
## Features
13+
14+
- Automatic code completion, based on the value of the `as` prop
15+
- Static type checking against the associated component’s inferred props
16+
- HTML element name validation
17+
18+
## Usage
19+
20+
A `Heading` component can demonstrate the effectiveness of polymorphism:
21+
22+
```tsx
23+
<Heading color="rebeccapurple">Heading</Heading>
24+
<Heading as="h3">Subheading</Heading>
25+
```
26+
27+
Custom components like the previous one may utilize the package as shown below.
28+
29+
```tsx
30+
import type { PolymorphicPropsWithoutRef } from "react-polymorphic-types";
31+
32+
// An HTML tag or a different React component can be rendered by default
33+
export const HeadingDefaultElement = "h2";
34+
35+
// Component-specific props should be specified separately
36+
export type HeadingOwnProps = {
37+
color?: string;
38+
};
39+
40+
// Extend own props with others inherited from the underlying element type
41+
// Own props take precedence over the inherited ones
42+
export type HeadingProps<
43+
T extends React.ElementType = typeof HeadingDefaultElement
44+
> = PolymorphicPropsWithoutRef<HeadingOwnProps, T>;
45+
46+
export function Heading<
47+
T extends React.ElementType = typeof HeadingDefaultElement
48+
>({ as, color, style, ...restProps }: HeadingProps<T>) {
49+
const Element: React.ElementType = as || ButtonDefaultElement;
50+
return <Element style={{ color, ...style }} {...restProps} />;
51+
}
52+
```
53+
54+
### With [`React.forwardRef`](https://reactjs.org/docs/react-api.html#reactforwardref)
55+
56+
```tsx
57+
import * as React from "react";
58+
import type { PolymorphicForwardRefExoticComponent } from "react-polymorphic-types";
59+
import { Heading, HeadingDefaultElement, HeadingOwnProps } from "./Heading";
60+
61+
export const RefForwardingHeading: PolymorphicForwardRefExoticComponent<
62+
HeadingOwnProps,
63+
HeadingDefaultElement
64+
> = React.forwardRef(Heading);
65+
```
66+
67+
### With [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo)
68+
69+
```tsx
70+
import * as React from "react";
71+
import type { PolymorphicMemoExoticComponent } from "react-polymorphic-types";
72+
import { Heading, HeadingDefaultElement, HeadingOwnProps } from "./Heading";
73+
74+
export const MemoizedHeading: PolymorphicMemoExoticComponent<
75+
HeadingOwnProps,
76+
HeadingDefaultElement
77+
> = React.memo(Heading);
78+
```
79+
80+
### With [`React.lazy`](https://reactjs.org/docs/react-api.html#reactlazy)
81+
82+
```tsx
83+
import * as React from "react";
84+
import type { PolymorphicLazyExoticComponent } from "react-polymorphic-types";
85+
import type { HeadingDefaultElement, HeadingOwnProps } from "./Heading";
86+
87+
export const LazyHeading: PolymorphicLazyExoticComponent<
88+
HeadingOwnProps,
89+
HeadingDefaultElement
90+
> = React.lazy(async () => {
91+
const { Heading } = await import("./Heading");
92+
return { default: Heading };
93+
});
94+
```

0 commit comments

Comments
 (0)