@gamecrafters/base-ui 0.0.10 → 0.0.12

package/README.md

@@ -0,0 +1,204 @@
+<a id="readme-top"></a>
+
+
+
+<br />
+<div align="center">
+
+<h3 align="center">Base UI</h3>
+
+  <p align="center">
+    An implementation of GameCrafters' Base UI Design System using React.
+  </p>
+
+[![npm][npm-shield]][npm-url]
+[![Contributors][contributors-shield]][contributors-url]
+[![Last Commit][last-commit-shield]][last-commit-url]
+[![MIT License][license-shield]][license-url]
+
+  <p align="center">
+    <a href="https://www.npmjs.com/package/@gamecrafters/base-ui">View Package</a>
+    &middot;
+    <a href="https://github.com/donaldturinglee/base-ui/issues/new?labels=bug">Report Bug</a>
+    &middot;
+    <a href="https://github.com/donaldturinglee/base-ui/issues/new?labels=enhancement">Request Feature</a>
+  </p>
+</div>
+
+
+
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
+
+
+
+## Getting Started
+
+To use Base UI in an application, install the package and import its stylesheet. To work on the library itself, clone the repository and run Storybook.
+
+### Installation
+
+To use the library in an application:
+
+1. Install the package
+   ```sh
+   npm install @gamecrafters/base-ui
+   ```
+2. Import the stylesheet once, at the root of the application
+   ```js
+   import '@gamecrafters/base-ui/main.css';
+   ```
+
+To work on the library itself:
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/donaldturinglee/base-ui.git
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+3. Start Storybook, which is where the components are developed and read
+   ```sh
+   npm run storybook
+   ```
+4. Working from a fork, change the git remote url to avoid accidental pushes to the base project
+   ```sh
+   git remote set-url origin https://github.com/your_username/base-ui.git
+   git remote -v # confirm the changes
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+## Usage
+
+Wrap the application in a `ThemeProvider` so the tokens resolve, then reach for the components:
+
+```jsx
+import { Box, Button, FormControl, Stack, TextInput, ThemeProvider } from '@gamecrafters/base-ui';
+import '@gamecrafters/base-ui/main.css';
+
+const App = () => (
+  <ThemeProvider colorMode="auto">
+    <Box padding="normal" background="muted" border="default" radius="medium">
+      <Stack gap="normal">
+        <FormControl required>
+          <FormControl.Label>Name</FormControl.Label>
+          <TextInput block />
+          <FormControl.Caption>The name people will know you by</FormControl.Caption>
+        </FormControl>
+        <Button variant="primary">Save</Button>
+      </Stack>
+    </Box>
+  </ThemeProvider>
+);
+
+export default App;
+```
+
+`colorMode` takes `day`, `night` or `auto`; `auto` follows the operating system. A nested `ThemeProvider` only has to say what it changes, so a subtree can hold a scheme of its own.
+
+For a right-to-left subtree, wrap it in a `DirectionProvider`:
+
+```jsx
+import { DirectionProvider } from '@gamecrafters/base-ui';
+
+<DirectionProvider direction="rtl">{children}</DirectionProvider>;
+```
+
+The scripts the repository is worked with:
+
+| Script | What it does |
+| --- | --- |
+| `npm run storybook` | Runs Storybook on port 9000 |
+| `npm run storybook:build` | Builds the static Storybook |
+| `npm test` | Runs the Jest suites |
+| `npm run build` | Builds the package with Rollup into `build/` |
+| `npm run lint` | Lints `src` and `tests` with ESLint |
+| `npm run format` | Applies both the ESLint and Prettier fixes |
+| `npm run clean` | Removes the build output |
+
+_Every component has a page in Storybook, with a Playground story for its props and a Features section for what it can do._
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+## Roadmap
+
+See the [open issues](https://github.com/donaldturinglee/base-ui/issues) for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Run `npm run lint` and `npm test`
+4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+5. Push to the Branch (`git push origin feature/AmazingFeature`)
+6. Open a Pull Request
+
+A new component follows the shape of the ones already there: a `ComponentName.tsx`, a `ComponentName.types.ts`, an `index.ts`, a Jest suite and two Storybook files under `src/components/<component-name>`, with its stylesheet under `src/styles/components` and one line added to each of the two barrels.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Top contributors:
+
+<a href="https://github.com/donaldturinglee/base-ui/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=donaldturinglee/base-ui" alt="contrib.rocks image" />
+</a>
+
+
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+## Contact
+
+[![LinkedIn](https://go-skill-icons.vercel.app/api/icons?i=linkedin&theme=dark)](https://www.linkedin.com/in/donaldturinglee/) &nbsp;
+[![Discord](https://go-skill-icons.vercel.app/api/icons?i=discord&theme=dark)](https://discord.gg/YsteKRjrSH) &nbsp;
+[![Twitter](https://go-skill-icons.vercel.app/api/icons?i=x&theme=dark)](https://x.com/donaldturinglee) &nbsp;
+[![YouTube](https://go-skill-icons.vercel.app/api/icons?i=youtube&theme=dark)](https://www.youtube.com/channel/UCOHOUOsJjGPBlov7FuwPDbA) &nbsp;
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+[npm-shield]: https://img.shields.io/npm/v/%40gamecrafters%2Fbase-ui.svg?style=for-the-badge
+[npm-url]: https://www.npmjs.com/package/@gamecrafters/base-ui
+[contributors-shield]: https://img.shields.io/github/contributors/donaldturinglee/base-ui.svg?style=for-the-badge
+[contributors-url]: https://github.com/donaldturinglee/base-ui/graphs/contributors
+[last-commit-shield]: https://img.shields.io/github/last-commit/donaldturinglee/base-ui.svg?style=for-the-badge
+[last-commit-url]: https://github.com/donaldturinglee/base-ui/commits/main
+[license-shield]: https://img.shields.io/github/license/donaldturinglee/base-ui.svg?style=for-the-badge
+[license-url]: https://github.com/donaldturinglee/base-ui/blob/main/LICENSE

package/build/components/attachment/Attachment.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { AttachmentOrientation, AttachmentSize, AttachmentState } from "./Attachment.types";
+declare const _default: <As extends React.ElementType = "div">(props: import("../../utilities/polymorphic").DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    state?: AttachmentState;
+    size?: AttachmentSize;
+    orientation?: AttachmentOrientation;
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/Attachment.types.d.ts

@@ -0,0 +1,41 @@
+import type * as React from "react";
+import type { PolymorphicProps } from "../../utilities/polymorphic";
+import type { IconButtonProps } from "../icon-button";
+export type AttachmentState = "idle" | "uploading" | "processing" | "error" | "done";
+export type AttachmentSize = "small" | "medium" | "large";
+export type AttachmentOrientation = "horizontal" | "vertical";
+export type AttachmentMediaVariant = "icon" | "image";
+export type AttachmentProps<As extends React.ElementType = "div"> = PolymorphicProps<As, "div", {
+    state?: AttachmentState;
+    size?: AttachmentSize;
+    orientation?: AttachmentOrientation;
+    className?: string;
+}>;
+export type AttachmentMediaProps = React.ComponentPropsWithoutRef<"div"> & {
+    variant?: AttachmentMediaVariant;
+    className?: string;
+};
+export type AttachmentContentProps = React.ComponentPropsWithoutRef<"div"> & {
+    className?: string;
+};
+export type AttachmentTitleProps = React.ComponentPropsWithoutRef<"span"> & {
+    className?: string;
+};
+export type AttachmentDescriptionProps = React.ComponentPropsWithoutRef<"span"> & {
+    className?: string;
+};
+export type AttachmentActionsProps = React.ComponentPropsWithoutRef<"div"> & {
+    className?: string;
+};
+export type AttachmentActionProps<As extends React.ElementType = "button"> = IconButtonProps<As>;
+export type AttachmentTriggerProps<As extends React.ElementType = "button"> = PolymorphicProps<As, "button", {
+    className?: string;
+}>;
+export type AttachmentGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+    className?: string;
+};
+export type AttachmentContextValue = {
+    state?: AttachmentState;
+    size?: AttachmentSize;
+    orientation?: AttachmentOrientation;
+};

package/build/components/attachment/AttachmentAction.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { AttachmentActionProps } from "./Attachment.types";
+declare const _default: <As extends React.ElementType = "button">(props: AttachmentActionProps<As> & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentActions.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentContent.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentContext.d.ts

@@ -0,0 +1,2 @@
+import type { AttachmentContextValue } from "./Attachment.types";
+export declare const AttachmentContext: import("react").Context<AttachmentContextValue>;

package/build/components/attachment/AttachmentDescription.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentGroup.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentMedia.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { AttachmentMediaVariant } from "./Attachment.types";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: AttachmentMediaVariant;
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentTitle.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/AttachmentTrigger.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const _default: <As extends React.ElementType = "button">(props: import("../../utilities/polymorphic").DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "button" : As> & {
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/attachment/index.d.ts

@@ -0,0 +1,45 @@
+import AttachmentAction from "./AttachmentAction";
+import AttachmentActions from "./AttachmentActions";
+import AttachmentContent from "./AttachmentContent";
+import AttachmentDescription from "./AttachmentDescription";
+import AttachmentGroup from "./AttachmentGroup";
+import AttachmentMedia from "./AttachmentMedia";
+import AttachmentTitle from "./AttachmentTitle";
+import AttachmentTrigger from "./AttachmentTrigger";
+export declare const Attachment: (<As extends React.ElementType = "div">(props: import("../../utilities/polymorphic").DistributiveOmit<import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
+    state?: import("./Attachment.types").AttachmentState;
+    size?: import("./Attachment.types").AttachmentSize;
+    orientation?: import("./Attachment.types").AttachmentOrientation;
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & import("react").RefAttributes<any>) => React.ReactNode) & {
+    Group: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Media: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        variant?: import("./Attachment.types").AttachmentMediaVariant;
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Content: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Title: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Description: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Actions: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+    Action: <As extends React.ElementType = "button">(props: import("./Attachment.types").AttachmentActionProps<As> & import("react").RefAttributes<any>) => React.ReactNode;
+    Trigger: <As extends React.ElementType = "button">(props: import("../../utilities/polymorphic").DistributiveOmit<import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "button" : As> & {
+        className?: string;
+    }, "as"> & {
+        as?: As | undefined;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+};
+export { AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, };
+export { AttachmentContext } from "./AttachmentContext";
+export * from "./Attachment.types";

package/build/components/box/Box.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { BoxBackground, BoxBorder, BoxOverflow, BoxPadding, BoxRadius, BoxShadow } from "./Box.types";
+declare const _default: <As extends React.ElementType = "div">(props: import("../../utilities/polymorphic").DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    padding?: BoxPadding;
+    paddingBlock?: BoxPadding;
+    paddingInline?: BoxPadding;
+    background?: BoxBackground;
+    border?: BoxBorder;
+    radius?: BoxRadius;
+    shadow?: BoxShadow;
+    overflow?: BoxOverflow;
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/box/Box.types.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { PolymorphicProps } from "../../utilities/polymorphic";
+export type BoxPadding = "none" | "tight" | "condensed" | "cozy" | "normal" | "spacious";
+export type BoxBackground = "none" | "default" | "muted" | "inset" | "emphasis";
+export type BoxBorder = "none" | "default" | "muted";
+export type BoxRadius = "none" | "small" | "medium" | "large" | "full";
+export type BoxShadow = "none" | "xsmall" | "small" | "medium";
+export type BoxOverflow = "visible" | "hidden";
+export type BoxProps<As extends React.ElementType = "div"> = PolymorphicProps<As, "div", {
+    padding?: BoxPadding;
+    paddingBlock?: BoxPadding;
+    paddingInline?: BoxPadding;
+    background?: BoxBackground;
+    border?: BoxBorder;
+    radius?: BoxRadius;
+    shadow?: BoxShadow;
+    overflow?: BoxOverflow;
+    className?: string;
+}>;

package/build/components/box/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Box } from "./Box";
+export * from "./Box.types";

package/build/components/index.d.ts

@@ -5,12 +5,14 @@ export * from "./action-menu";
 export * from "./alert";
 export * from "./anchored-overlay";
 export * from "./aspect-ratio";
+export * from "./attachment";
 export * from "./autocomplete";
 export * from "./avatar";
 export * from "./avatar-stack";
 export * from "./banner";
 export * from "./blankslate";
 export * from "./blockquote";
+export * from "./box";
 export * from "./breadcrumbs";
 export * from "./bubble";
 export * from "./button";
@@ -61,6 +63,7 @@ export * from "./meter";
 export * from "./navigation-list";
 export * from "./navigation-menu";
 export * from "./number-input";
+export * from "./page-container";
 export * from "./page-content";
 export * from "./page-footer";
 export * from "./page-header";

package/build/components/page-container/PageContainer.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { PageContainerSpacing, PageContainerWidth } from "./PageContainer.types";
+declare const _default: <As extends React.ElementType = "div">(props: import("../../utilities/polymorphic").DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    width?: PageContainerWidth;
+    padding?: PageContainerSpacing;
+    gap?: PageContainerSpacing;
+    fullHeight?: boolean;
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/page-container/PageContainer.types.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { ResponsiveValue } from "../../hooks/useResponsive";
+import type { PolymorphicProps } from "../../utilities/polymorphic";
+export type PageContainerViewport = "narrow" | "regular" | "wide";
+export type PageContainerHidden = boolean | ResponsiveValue<boolean>;
+export type PageContainerWidth = "full" | "medium" | "large" | "xlarge";
+export type PageContainerSpacing = "none" | "condensed" | "normal" | "spacious";
+export type PageContainerProps<As extends React.ElementType = "div"> = PolymorphicProps<As, "div", {
+    width?: PageContainerWidth;
+    padding?: PageContainerSpacing;
+    gap?: PageContainerSpacing;
+    fullHeight?: boolean;
+    className?: string;
+}>;
+export type PageContainerRegionProps<As extends React.ElementType = "div"> = Omit<PolymorphicProps<As, "div">, "hidden"> & {
+    hidden?: PageContainerHidden;
+    grow?: boolean;
+    className?: string;
+};

package/build/components/page-container/PageContainerRegion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const _default: <As extends React.ElementType = "div">(props: Omit<import("../../utilities/polymorphic").PolymorphicProps<As, "div">, "hidden"> & {
+    hidden?: import("./PageContainer.types").PageContainerHidden;
+    grow?: boolean;
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
+export default _default;

package/build/components/page-container/index.d.ts

@@ -0,0 +1,18 @@
+import PageContainerRegion from "./PageContainerRegion";
+export declare const PageContainer: (<As extends React.ElementType = "div">(props: import("../../utilities/polymorphic").DistributiveOmit<import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
+    width?: import("./PageContainer.types").PageContainerWidth;
+    padding?: import("./PageContainer.types").PageContainerSpacing;
+    gap?: import("./PageContainer.types").PageContainerSpacing;
+    fullHeight?: boolean;
+    className?: string;
+}, "as"> & {
+    as?: As | undefined;
+} & import("react").RefAttributes<any>) => React.ReactNode) & {
+    Region: <As extends React.ElementType = "div">(props: Omit<import("../../utilities/polymorphic").PolymorphicProps<As, "div">, "hidden"> & {
+        hidden?: import("./PageContainer.types").PageContainerHidden;
+        grow?: boolean;
+        className?: string;
+    } & import("react").RefAttributes<any>) => React.ReactNode;
+};
+export { PageContainerRegion };
+export * from "./PageContainer.types";

package/build/components/page-container/visibility.d.ts

@@ -0,0 +1,6 @@
+import type { PageContainerHidden, PageContainerViewport } from "./PageContainer.types";
+export declare const viewports: PageContainerViewport[];
+export declare const getHiddenViewports: (hidden?: PageContainerHidden) => PageContainerViewport[];
+export declare const getViewportClassName: (matched: PageContainerViewport[], all: string, when: Record<PageContainerViewport, string>) => string | string[];
+export declare const getHiddenClassName: (hiddenViewports: PageContainerViewport[]) => string | string[];
+export declare const getHiddenAttribute: (hiddenViewports: PageContainerViewport[]) => string | undefined;