@obolnetwork/obol-ui 1.1.17 → 1.1.18

package/README.md

@@ -1,88 +1,69 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# @obolnetwork/obol-ui
 
-## Getting Started
+Obol Network's shared React component library, built with [Stitches](https://stitches.dev/) and organised using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles.
 
-First, run the development server:
+## Installation
 
 ```bash
-npm run dev
+yarn add @obolnetwork/obol-ui
 # or
-yarn dev
+npm install @obolnetwork/obol-ui
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Usage
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+```tsx
+import { Button, Text, Flex } from "@obolnetwork/obol-ui";
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+export default function App() {
+  return (
+    <Flex direction="column" gap="2">
+      <Text>Hello from Obol UI</Text>
+      <Button onClick={() => console.log("clicked")}>Get Started</Button>
+    </Flex>
+  );
+}
+```
 
-## Testing
-We use Jest and React Testing Library for testing our React components and functions. Jest is a testing framework that provides us with test runners, assertions, and mocks, while React Testing Library is a set of utilities that helps us write tests that are closer to how our end-users will interact with our application.
+### Theme setup
 
-### Running tests
-To run the tests, simply run the following command in your terminal:
+Obol UI uses Stitches for styling. Import and apply the global CSS reset in your app's entry point:
 
-```bash 
-yarn run test
+```tsx
+import { globalCss, getCssText } from "@obolnetwork/obol-ui";
 ```
 
-This will start the Jest test runner, which will automatically find and run all the tests in our project that match the naming pattern *.test.js or *.spec.js. located at __tests__ You can also run a specific test file by running the following command:
+## Components
 
-```bash
-yarn run test <path-to-file>
-```
+The library follows Atomic Design methodology:
 
-This will run only the tests in the Button.test.js file.
+**Atoms** — Avatar, Badge, Box, Button, Checkbox, Container, Flex, Grid, IconButton, Image, Link, NavigationMenu, NumberField, ProgressBar, Separator, Skeleton, Switch, Text, TextField, Toggle, Tooltip, and more.
 
-### Writing tests
-We write tests using Jest and React Testing Library in the same file as the component or function we are testing. For example, if we are testing a component called Button, we would create a file called Button.test.js in the same directory as the Button.js file.
+**Molecules** — Accordion, Card, Dialog, Navbar, NotificationCard, Pagination, Profile, ProgressTracker, RadioGroup, ResponsiveDialog, Table, Tabs, and more.
 
-Here's an example test file:
+**Organisms** — Advisory, Footer, HeroSection, Selector, TwoColumnSection.
 
-```typescript
-import { Button } from "../../../components/atoms/Button/Button";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+**Utilities** — Color variants, media query hooks, shared styles and types.
 
-describe("Button Component", () => {
-  describe("On Click Listener", () => {
-    const user = userEvent.setup();
-    const mockProps = {
-      onClick: jest.fn(),
-    };
+## Development
 
-    test("Calls onClick function passed in", async () => {
-      render(<Button {...mockProps}>test</Button>);
+```bash
+# Run Storybook for local component development
+yarn storybook
 
-      const testButton = screen.getByText("test");
-      await user.click(testButton);
+# Build the design system
+yarn ds:build
 
-      expect(mockProps.onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});
+# Run tests
+yarn test
 ```
 
-In this example, we're testing the Button component by rendering it with different props and checking that the correct elements are present and that the onClick function is called when the button is clicked.
-
-Husky and pre-commit hooks
-We use Husky to manage Git hooks, such as pre-commit hooks. Our pre-commit hook runs the tests before committing any code changes, ensuring that we only commit code that passes all the tests.
-
-If you try to commit changes that break the tests, Husky will prevent the commit from going through and display an error message in your terminal.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## Links
 
-## Deploy on Vercel
+- [Obol Network](https://obol.org)
+- [Documentation](https://docs.obol.org)
+- [GitHub](https://github.com/ObolNetwork/obol-packages)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -16,9 +16,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "ds:build": "rollup -c",
-    "ds:release:major": "npm version $(semver $npm_package_version -i major) && npm publish --tag latest",
-    "ds:release:minor": "npm version $(semver $npm_package_version -i minor) && npm publish --tag latest",
-    "ds:release:patch": "npm version $(semver $npm_package_version -i patch) && npm publish --tag latest",
+    "ds:release:major": "npm version major --no-git-tag-version && npm publish --tag latest",
+    "ds:release:minor": "npm version minor --no-git-tag-version && npm publish --tag latest",
+    "ds:release:patch": "npm version patch --no-git-tag-version && npm publish --tag latest",
     "test": "jest",
     "prepare": "husky",
     "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",