Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clean up the build #49

Merged
merged 1 commit into from
Aug 3, 2023
Merged

Clean up the build #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions babel.config.cjs
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,6 @@
},
"homepage": "https://github.com/vector-im/compound-web#readme",
"devDependencies": {
"@babel/core": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@fontsource/inter": "^5.0.5",
"@percy/cli": "^1.26.2",
"@percy/storybook": "^4.3.6",
Expand All @@ -78,7 +75,6 @@
"@vector-im/compound-design-tokens": "0.0.3",
"@vitejs/plugin-react": "^4.0.4",
"@vitest/coverage-v8": "^0.33.0",
"babel-loader": "^9.1.3",
"browserslist-to-esbuild": "^1.2.0",
"eslint": "^8.46.0",
"eslint-config-prettier": "^8.9.0",
Expand Down
6 changes: 3 additions & 3 deletions src/components/ActionControl/ActionControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/

import classnames from "classnames";
import React, { PropsWithChildren, useId } from "react";
import React, { PropsWithChildren, useId, forwardRef } from "react";
import styles from "./ActionControl.module.css";

import { Control, Field, Root } from "../Form";
Expand All @@ -28,7 +28,7 @@ type ActionControlProps = {
disabled?: boolean;
} & React.ComponentProps<typeof Control>;

export const ActionControl = React.forwardRef<
export const ActionControl = forwardRef<
HTMLInputElement,
PropsWithChildren<ActionControlProps>
>(function ActionControl(
Expand Down Expand Up @@ -62,7 +62,7 @@ export const ActionControl = React.forwardRef<
);
});

export const StandaloneActionControl = React.forwardRef<
export const StandaloneActionControl = forwardRef<
HTMLInputElement,
PropsWithChildren<ActionControlProps>
>(function StandaloneActionControl(props, ref) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/

import classnames from "classnames";
import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import styles from "./Checkbox.module.css";
import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg";

Expand All @@ -25,7 +25,7 @@ type CheckboxProps = {
onMouseDown?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
} & React.ComponentPropsWithoutRef<"input">;

export const Checkbox = React.forwardRef<
export const Checkbox = forwardRef<
HTMLInputElement,
PropsWithChildren<CheckboxProps>
>(function Checkbox(
Expand Down
4 changes: 2 additions & 2 deletions src/components/Form/Control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import { Control as RadixControl } from "@radix-ui/react-form";

import styles from "./form.module.css";
Expand All @@ -28,7 +28,7 @@ type ControlProps = {
* Thin wrapper around Radix UI Control component
* https://www.radix-ui.com/docs/primitives/components/form#control
*/
export const Control = React.forwardRef<
export const Control = forwardRef<
HTMLInputElement,
PropsWithChildren<ControlProps>
>(function Control({ children, ...props }, ref) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Form/Controls/MFA/MFA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithoutRef, useState } from "react";
import React, { forwardRef, PropsWithoutRef, useState } from "react";
import classnames from "classnames";
import { Control } from "../../Control";

Expand All @@ -33,7 +33,7 @@ type MFAProps = {
* Thin wrapper around Radix UI Control component
* https://www.radix-ui.com/docs/primitives/components/form#control
*/
export const MFAControl = React.forwardRef(function MFAControl(
export const MFAControl = forwardRef(function MFAControl(
{ className, length = 6, ...props }: PropsWithoutRef<MFAProps>,
ref: React.ForwardedRef<HTMLInputElement>,
) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Form/Controls/Password/Password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren, useReducer } from "react";
import React, { forwardRef, PropsWithChildren, useReducer } from "react";
import { ActionControl } from "../../../ActionControl/ActionControl";
import { Control } from "../../Control";

Expand All @@ -39,7 +39,7 @@ const hideState = {
* Thin wrapper around Radix UI Control component
* https://www.radix-ui.com/docs/primitives/components/form#control
*/
export const PasswordControl = React.forwardRef<
export const PasswordControl = forwardRef<
HTMLInputElement,
PropsWithChildren<React.ComponentProps<typeof Control>>
>(function PasswordControl(props, ref) {
Expand Down
23 changes: 11 additions & 12 deletions src/components/Form/Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import { Field as RadixField } from "@radix-ui/react-form";

import styles from "./form.module.css";
Expand All @@ -28,14 +28,13 @@ type FieldProps = {
* Thin wrapper around Radix UI Field component
* https://www.radix-ui.com/docs/primitives/components/form#field
*/
export const Field = React.forwardRef<
HTMLDivElement,
PropsWithChildren<FieldProps>
>(function Field({ children, ...props }, ref) {
const classes = classNames(styles.field, props.className);
return (
<RadixField ref={ref} {...props} className={classes}>
{children}
</RadixField>
);
});
export const Field = forwardRef<HTMLDivElement, PropsWithChildren<FieldProps>>(
function Field({ children, ...props }, ref) {
const classes = classNames(styles.field, props.className);
return (
<RadixField ref={ref} {...props} className={classes}>
{children}
</RadixField>
);
},
);
4 changes: 2 additions & 2 deletions src/components/Form/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { PropsWithChildren, forwardRef } from "react";
import { Label as RadixLabel } from "@radix-ui/react-form";

import styles from "./form.module.css";
Expand All @@ -28,7 +28,7 @@ type LabelProps = {
* Thin wrapper around Radix UI Label component
* https://www.radix-ui.com/docs/primitives/components/form#label
*/
export const Label = React.forwardRef<
export const Label = forwardRef<
HTMLLabelElement,
PropsWithChildren<LabelProps>
>(function Label({ children, ...props }, ref) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Form/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import { Message as RadixMessage } from "@radix-ui/react-form";

import styles from "./form.module.css";
Expand All @@ -28,7 +28,7 @@ type MessageProps = {
* Thin wrapper around Radix UI Message component
* https://www.radix-ui.com/docs/primitives/components/form#message
*/
export const Message = React.forwardRef<
export const Message = forwardRef<
HTMLSpanElement,
PropsWithChildren<MessageProps>
>(function Message({ children, ...props }, ref) {
Expand Down
23 changes: 11 additions & 12 deletions src/components/Form/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import { Root as RadixRoot } from "@radix-ui/react-form";

import styles from "./form.module.css";
Expand All @@ -28,14 +28,13 @@ type RootProps = {
* Thin wrapper around Radix UI Root component
* https://www.radix-ui.com/docs/primitives/components/form#root
*/
export const Root = React.forwardRef<
HTMLFormElement,
PropsWithChildren<RootProps>
>(function Root({ children, ...props }, ref) {
const classes = classNames(styles.root, props.className);
return (
<RadixRoot ref={ref} {...props} className={classes}>
{children}
</RadixRoot>
);
});
export const Root = forwardRef<HTMLFormElement, PropsWithChildren<RootProps>>(
function Root({ children, ...props }, ref) {
const classes = classNames(styles.root, props.className);
return (
<RadixRoot ref={ref} {...props} className={classes}>
{children}
</RadixRoot>
);
},
);
33 changes: 16 additions & 17 deletions src/components/Link/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import styles from "./Link.module.css";
import classNames from "classnames";

Expand All @@ -23,19 +23,18 @@ type LinkProps = {
kind?: "primary" | "critical";
} & Omit<React.HTMLProps<HTMLAnchorElement>, "rel">;

export const Link = React.forwardRef<
HTMLAnchorElement,
PropsWithChildren<LinkProps>
>(function Link({ children, className, kind = "primary", ...props }, ref) {
return (
<a
ref={ref}
{...props}
rel="noreferrer noopener"
className={classNames(styles.link, className)}
data-kind={kind}
>
{children}
</a>
);
});
export const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
function Link({ children, className, kind = "primary", ...props }, ref) {
return (
<a
ref={ref}
{...props}
rel="noreferrer noopener"
className={classNames(styles.link, className)}
data-kind={kind}
>
{children}
</a>
);
},
);
4 changes: 2 additions & 2 deletions src/components/Radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/

import classnames from "classnames";
import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import styles from "./Radio.module.css";

type RadioProps = {
Expand All @@ -27,7 +27,7 @@ type RadioProps = {
/**
* Radio form control
*/
export const Radio = React.forwardRef<
export const Radio = forwardRef<
HTMLInputElement,
PropsWithChildren<RadioProps>
>(function Radio({ kind = "primary", className, onMouseDown, ...props }, ref) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Toggle/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/

import classnames from "classnames";
import React, { PropsWithChildren } from "react";
import React, { forwardRef, PropsWithChildren } from "react";
import styles from "./Toggle.module.css";

type ToggleProps = {
Expand All @@ -27,7 +27,7 @@ type ToggleProps = {
* Standalone toggle component to be used with a Radix form control
* See https://www.radix-ui.com/docs/primitives/components/form#composing-with-your-own-components
*/
export const Toggle = React.forwardRef<
export const Toggle = forwardRef<
HTMLInputElement,
PropsWithChildren<ToggleProps>
>(function Toggle({ className, onMouseDown, ...props }, ref) {
Expand Down
9 changes: 2 additions & 7 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ export default defineConfig({
external: [
"react",
"react-dom",
"react-dom/server",
"react/jsx-runtime",
"react/jsx-dev-runtime",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? I understand react dom. But not sure I have the rationale behind this one? Is that something that usually gets injected by webpack dev server or similar?

"lodash",
"classnames",
"@radix-ui/react-form",
Expand All @@ -39,13 +41,6 @@ export default defineConfig({
},
},

experimental: {
// This ensures we're using relative paths in the generated CSS
renderBuiltUrl(filename: string) {
return `./${filename}`;
},
},

plugins: [
react({
jsxRuntime: "automatic",
Expand Down
Loading