From ca17fe52eb68199cd05d0e346d154b81eba296a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= Date: Fri, 13 Oct 2023 09:29:21 +0200 Subject: [PATCH] docs: added missing installation steps NO-JIRA --- README.md | 131 +++++++++++++++++++++--- public/VLLogo.png | Bin 18251 -> 0 bytes public/{logo_docs.svg => logo-docs.svg} | 0 public/logo-virtuslab.svg | 3 + src/docs-pages/ReadMe.mdx | 2 +- 5 files changed, 119 insertions(+), 17 deletions(-) delete mode 100644 public/VLLogo.png rename public/{logo_docs.svg => logo-docs.svg} (100%) create mode 100644 public/logo-virtuslab.svg diff --git a/README.md b/README.md index df905b12..5610ecfc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -css-in-readme +css-in-readme # Tetrisly React @@ -15,17 +15,25 @@ We've desided to use `xstyled` for styling our components. If you are interested ## Installation -Install tetrisly-react with npm (you can do the same with yarn, pnpm or any other package manager) +Install `tetrisly-react`` with npm (you can do the same with yarn, pnpm or any other package manager) ```bash npm install @virtuslab/tetrisly-react ``` +and dependencies: + +```bash + npm install styled-components @xstyled/styled-components +``` + ## Setup +### TetrislyProvider + 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 +```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { @@ -33,34 +41,112 @@ function App() { - ) + ); } ``` 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 +```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { return ( - + - ) + ); } ``` -## Usage/Examples +### Default theme -```typescript -import { Button } from '@virtuslab/tetrisly-react'; +Our default theme contains all of fundamental Tetrisly Design Tokens, you can use it with `xstyled` props to easy set up +your design. See `tet.*` utility [example of use](#tet-utility). -function App() { - return