From d7c90e8777ca27aa619a344ca813e9a20f33b3d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Wlekli=C5=84ski?= <114148518+mwleklinskiVL@users.noreply.github.com> Date: Wed, 4 Oct 2023 15:15:16 +0200 Subject: [PATCH] Chore/tet 142/add readme (#74) * chore: TET-142 create Readme, add hero and description * chore: TET-142 add content and VL logo * chore: TET-142 update Logo * chore: TET-142 remove TET section, add article * chore: TET-142 add setup and move usage higer * Update README.md * chore: TET-142 add corrections to README.md * chore: NO-JIRA fix yarn.lock --- README.md | 118 ++ header.svg | 94 ++ package.json | 2 +- public/VLLogo.png | Bin 0 -> 18251 bytes public/logo_docs.svg | 17 + yarn.lock | 2497 +++++++++++++++++++++--------------------- 6 files changed, 1471 insertions(+), 1257 deletions(-) create mode 100644 README.md create mode 100644 header.svg create mode 100644 public/VLLogo.png create mode 100644 public/logo_docs.svg diff --git a/README.md b/README.md new file mode 100644 index 00000000..2f4e6e28 --- /dev/null +++ b/README.md @@ -0,0 +1,118 @@ +css-in-readme + +# Tetrisly React + +🧩 Tetrisly offers user-friendly components designed for effortless integration. Plus, it's fully compatible with fully compatible with Tetrisly for Figma with a seamless design and development experience in mind. + +If you want to know more about Tetrisly, check out our website: [tetrisly.com](https://tetrisly.com/) + +## Tech Stack + +- [React 18](https://react.dev/) +- [xstyled](https://xstyled.dev/) + +We've desided to use `xstyled` for styling our components. If you are interested in our reasoning, check out our article on this topic: [Style Wars: Tailwind vs. CSS-in-JS in Design Systems Implementation](https://medium.com/tetrisly/style-wars-tailwind-vs-css-in-js-in-design-systems-implementation-de6015ee2695) + +## Installation + +Install tetrisly-react with npm (you can do the same with yarn, pnpm or any other package manager) + +```bash + npm install @virtuslab/tetrisly-react +``` + +## Setup + +After installing the package, you need to wrap your application in the `TetrislyProvider` component. This will provide the theme and other context to your application. + +```typescript +import { TetrislyProvider } from '@virtuslab/tetrisly-react'; + +function App() { + return ( + + + + ) +} +``` + +TetrislyProvider accepts optional prop `theme` which can be used to override default theme. + +You can check out how this object looks like here: [Tetrisly Theme](src/theme/theme.ts) + +```typescript +import { TetrislyProvider } from '@virtuslab/tetrisly-react'; + +function App() { + return ( + + + + ) +} +``` + +## Usage/Examples + +```typescript +import { Button } from '@virtuslab/tetrisly-react'; + +function App() { + return