build(docs): add up to date docs for library, fix invalid build issue…

…s, i.e. missing preset

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) hobbescodes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,3 +1,21 @@
-# tigris-ui
+# Tigris Design System & UI Kit
 
-## TODO
+Universal design system and component library built by [hobbescodes](https://github.com/hobbescodes), powered by [Panda](https://panda-css.com/) and [Ark](https://ark-ui.com/).
+
+## Quick Start
+
+Follow the [prerequisities](docs/usage.md#prerequisites) to install Panda in your project, then follow the [package install instructions](docs/usage.md#from-published-package).
+
+## Local Development
+
+1. Install dependencies: `bun install`
+2. Start development stack: `bun dev`
+   - This will launch the following:
+     - [Panda CSS](https://panda-css.com/) in watch mode
+     - [Storybook](https://storybook.js.org/) in development mode (default port: `6006`, e.g. http://localhost:6006)
+
+If you'd like to develop outside of Storybook, as in a dedicated app, follow the [prerequisities](docs/usage.md#prerequisites), then follow the [local usage instructions](docs/usage.md#local).
+
+## License
+
+The code in this repository is licensed under MIT, &copy; hobbescodes. See <a href="LICENSE.md">LICENSE.md</a> for more information.

docs/usage.md

@@ -0,0 +1,79 @@
+# Tigris UI Library Usage
+
+Follow these steps to use the Tigris UI library in your project.
+
+## Prerequisites
+
+1. Install [Panda 🐼](https://panda-css.com/): `bun add -D @pandacss/dev`
+
+2. Create a Panda config file similar to this (Panda looks for `panda.config.ts` by default):
+
+   ```ts
+   // panda.config.ts
+   import { tigrisPreset } from "@hobbescodes/tigris-ui";
+   import { defineConfig } from "@pandacss/dev";
+
+   const pandaConfig = defineConfig({
+     preflight: true,
+     presets: ["@pandacss/dev/presets", tigrisPreset],
+     include: ["src/**/*.{ts,tsx}"],
+     outdir: "src/generated/panda",
+   });
+
+   export default pandaConfig;
+   ```
+
+   Feel free to modify the Panda config as needed, for example if you need to add more patterns to `include`.
+
+3. Create a `postcss.config.js` file in your project root with the following content:
+
+   ```js
+   module.exports = {
+     plugins: {
+       "@pandacss/dev/postcss": {},
+     },
+   };
+   ```
+
+   There is no need to install `postcss` as an explicit dependency in your project, the config will be picked up by the UI library bundle.
+
+4. Create a CSS file and import it into your project. You can name the CSS file anything you want, just make sure you import it early in your project. For example:
+
+   ```css
+   /* main.css */
+   @layer reset, base, tokens, recipes, utilities;
+   @import url("@hobbescodes/tigris-ui/index.css");
+   ```
+
+   ```tsx
+   // App.tsx
+   import "main.css";
+
+   const App = () => <></>;
+   ```
+
+5. (**_for TypeScript users_**) If you are using TypeScript, make sure your consuming application has `compilerOptions.moduleResolution` set to `node16` or higher (e.g. `nodenext`) in `tsconfig.json`. This will allow you to properly import from subpaths from the library. Read more about this [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js).
+
+Now you are ready to install the UI library. You can either install it [from the published package](#from-published-package) or from a [local clone](#local) on your local filesystem. The latter is useful if you are developing the library.
+
+## Remote
+
+Install from remote repository along with required dependencies: `bun add @hobbescodes/tigris-ui @ark-ui/react`
+
+## Local
+
+This workflow is ideal for local development.
+
+1. **Within the root UI library directory**, build the UI library: `bun run build`
+2. **Within the project directory:**
+
+   1. Install dependencies: `bun install`
+   2. Link the UI library: `bun link @hobbescodes/tigris-ui`. Linking will not modify `package.json`, it will just symlink the package into your `node_modules`. Note that the package must be published to bun's local store first (this happens automatically after a successful build of the UI library)
+
+      > 💡 **Note:** every time you install or modify dependencies (e.g. run `bun i` or `bun add [...]`), or update the store from the UI library (e.g. running `bun run build`) the package symlink will be cleared, and will need to be relinked:
+      >
+      > ```sh
+      >  bun link @hobbescodes/tigris-ui
+      > ```
+
+      > 💡 **Note:** if the UI library build fails, this will cause trickling errors. Make sure the UI library builds successfully if you are still having issues.

src/index.ts

@@ -1,6 +1,8 @@
 // inject root cascade layers
 import "lib/styles/main.css";
 
+export { tigrisPreset } from "lib/theme/presets";
+
 // 🐼 export backfill of Panda components
 export * from "generated/panda/css";
 export * from "generated/panda/jsx";