diff options
Diffstat (limited to 'examples/kitchen-sink/packages/ui/src')
5 files changed, 81 insertions, 0 deletions
diff --git a/examples/kitchen-sink/packages/ui/src/CounterButton.tsx b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx new file mode 100644 index 0000000..ec99b39 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; + +export const CounterButton = () => { + const [count, setCount] = React.useState(0); + return ( + <div + style={{ + background: `rgba(0,0,0,0.05)`, + borderRadius: `8px`, + padding: "1.5rem", + fontWeight: 500, + }} + > + <p style={{ margin: "0 0 1.5rem 0" }}> + This component is from{" "} + <code + style={{ + padding: "0.2rem 0.3rem", + background: `rgba(0,0,0,0.1)`, + borderRadius: "0.25rem", + }} + > + ui + </code> + </p> + <div> + <button + style={{ + background: "black", + color: "white", + border: "none", + padding: "0.5rem 1rem", + borderRadius: "0.25rem", + display: "inline-block", + cursor: "pointer", + }} + type="button" + onClick={() => setCount((c) => c + 1)} + > + Count: {count} + </button> + </div> + </div> + ); +}; diff --git a/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx new file mode 100644 index 0000000..e8a00a0 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +export const NewTabLink = ({ + children, + href, + ...other +}: { + children: React.ReactNode; + href: string; +}) => { + return ( + <a target="_blank" rel="noreferrer" href={href} {...other}> + {children} + </a> + ); +}; diff --git a/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx new file mode 100644 index 0000000..8956208 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { CounterButton } from "../CounterButton"; + +describe("CounterButton", () => { + it("renders without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render(<CounterButton />, div); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json b/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json new file mode 100644 index 0000000..10f19c1 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/__tests__/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "include": [".", "../."], + "compilerOptions": { + "jsx": "react" + } +} diff --git a/examples/kitchen-sink/packages/ui/src/index.tsx b/examples/kitchen-sink/packages/ui/src/index.tsx new file mode 100644 index 0000000..4880f34 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/index.tsx @@ -0,0 +1,3 @@ +import * as React from "react"; +export { NewTabLink } from "./NewTabLink"; +export { CounterButton } from "./CounterButton"; |