diff --git a/package.json b/package.json index 5bdf0d0..426e407 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "publishConfig": { "registry": "https://npm.pkg.github.com" }, - "version": "0.0.5", + "version": "0.0.6", "description": "system.css theme wrapped for React", "type": "module", "main": "dist/index.cjs.js", diff --git a/src/button/Button.tsx b/src/button/Button.tsx index aeb327b..a589fe7 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -1,25 +1,18 @@ -import React, { MouseEventHandler } from "react"; +import React from "react"; import styles from "../styles"; -export type ButtonProps = { +export type ButtonProps = React.ComponentProps<"button"> & { primary?: boolean; - disabled?: boolean; - children?: React.ReactNode; - onClick?: MouseEventHandler; }; -const Button: React.FC = ({ - children, - primary, - disabled, - onClick, -}) => { +const Button: React.FC = ({ primary, children, ...props }) => { let className = `${styles["btn"]}`; - if (primary && !disabled) { + if (primary && !props.disabled) { className += ` ${styles["btn-default"]}`; } + return ( - ); diff --git a/src/index.ts b/src/index.ts index aef652f..98b0c30 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,15 +1,24 @@ +export * from "./alert"; +export type * from "./alert"; + export * from "./button"; export type * from "./button"; export * from "./dialog"; export type * from "./dialog"; -export * from "./alert"; -export type * from "./alert"; - export * from "./modal"; export type * from "./modal"; +export * from "./modeless"; +export type * from "./modeless"; + +export * from "./select"; +export type * from "./select"; + +export * from "./window"; +export type * from "./window"; + // vite compiles the included styles into styles.css. // Automatically import them since they're namespaced. import "./style.css"; diff --git a/src/select/Select.tsx b/src/select/Select.tsx new file mode 100644 index 0000000..4e92c34 --- /dev/null +++ b/src/select/Select.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +// the props are exactly the same as the select component +export type SelectProps = React.ComponentProps<"button">; + +// Apparently we don't actually need to style this component. +// That's not ideal because we want to make sure the styles +// that are being applied are also isolated to this component. +const Select: React.FC = ({ children }) => { + return ; +}; + +export default Select; diff --git a/src/select/SelectOption.tsx b/src/select/SelectOption.tsx new file mode 100644 index 0000000..f0bc450 --- /dev/null +++ b/src/select/SelectOption.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +// the props are exactly the same as the select component +export type SelectOptionProps = React.ComponentProps<"option">; + +// Apparently we don't actually need to style this component. +// That's not ideal because we want to make sure the styles +// that are being applied are also isolated to this component. +const Select: React.FC = ({ children }) => { + return ; +}; + +export default Select; diff --git a/src/select/__docs__/Example.tsx b/src/select/__docs__/Example.tsx new file mode 100644 index 0000000..65c9ccc --- /dev/null +++ b/src/select/__docs__/Example.tsx @@ -0,0 +1,26 @@ +import React, { FC } from "react"; +import Select from ".."; + +export type ExampleProps = {}; + +const Example: FC = ({}) => { + return ( +
+ +
+ ); +}; + +export default Example; diff --git a/src/select/__docs__/Modeless.stories.tsx b/src/select/__docs__/Modeless.stories.tsx new file mode 100644 index 0000000..a23868a --- /dev/null +++ b/src/select/__docs__/Modeless.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import Example from "./Example"; + +const meta: Meta = { + title: "Select", + component: Example, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; diff --git a/src/select/index.ts b/src/select/index.ts new file mode 100644 index 0000000..81c0a8b --- /dev/null +++ b/src/select/index.ts @@ -0,0 +1,14 @@ +import SelectParent from "./Select"; +export type { SelectProps } from "./Select"; + +import Option from "./SelectOption"; +export type { SelectOptionProps } from "./SelectOption"; + +type SelectNamespace = typeof SelectParent & { + Option: typeof Option; +}; + +const Select = SelectParent as SelectNamespace; +Select.Option = Option; + +export default Select;