diff --git a/README.md b/README.md index f0cab87..950c47f 100644 --- a/README.md +++ b/README.md @@ -28,185 +28,8 @@ --- -## 🚀 Quick Links - -- Checkout the [demos](https://reaviz.github.io/realayers/) -- View the library on [Chromatic](https://chromatic.com/library?appId=5f64a424915bb90022b5d92a&branch=master) -- Learn about updates from the [changelog](CHANGELOG.md) - -## 📦 Usage -Install the package via NPM: - -``` -npm i realayers --s -``` --or- -``` -yarn add realayers -``` - -### Tooltip -```tsx -import React, { FC } from 'react'; -import { Tooltip } from 'realayers'; - -const MyComponent: FC = () => ( - Hover me -); -``` - -### Popover -```tsx -import React, { FC } from 'react'; -import { Popover } from 'realayers'; - -const MyComponent: FC = () => ( - -

WHATS UP????!

- - - } - > - Click me -
-); -``` - -### Dialog -```tsx -import React, { FC } from 'react'; -import { useDialog } from 'realayers'; - -export const Simple = () => { - const { toggleOpen, Dialog } = useDialog(); - - return ( -
- - - Hello - -
- ); -}; -``` - -### Drawer -```tsx -import React, { FC } from 'react'; -import { useDrawer } from 'realayers'; - -export const Simple = () => { - const { toggleOpen, Drawer } = useDrawer(); - - return ( -
- - - Hello - -
- ); -}; -``` - -### Menu -```tsx -import React, { FC } from 'react'; -import { useMenu } from 'realayers'; - -export const Simple = () => { - const { toggleOpen, ref, Menu } = useMenu(); - - return ( -
- - - Hello - -
- ); -}; -``` - -### ContextMenu -```tsx -import React, { FC } from 'react'; -import { ContextMenu } from 'realayers'; - -export const Simple = () => ( - - something cool here - - } - > - - -); -``` - -### Notifications -```tsx -import React, { FC } from 'react'; -import { Notifications, useNotification } from 'realayers'; - -export const App = () => ( - - - -); - -export const YourComponent = () => { - const { notify } = useNotification(); - - return ( - - ); -}; -``` - -## 🎨 CSS Variables -Add the following CSS variables to your application's body. - -```css -body { - --color-popover: rgb(0, 0, 0, .8); - --color-on-popover: white; - - --color-tooltip: rgb(0, 0, 0, .8); - --color-on-tooltip: white; - - --color-dialog: #2c2c35; - --color-on-dialog: #fff; - - --color-drawer: #2c2c35; - --color-on-drawer: #fff; - - --color-notification: rgb(9, 9, 10, 0.9); - --color-on-notification: #fff; - --color-notification-border: transparent; - --color-notification-error: red; - --color-notification-warning: yellow; - --color-notification-success: green; - - --color-layer-transparent: rgba(5, 6, 12, 0.9); -} -``` - -## 🔭 Development - -If you want to run realayers locally, its super easy! - -- Clone the repo -- `yarn install` -- `yarn start` -- Browser opens to Storybook page +## DEPRECATED +This project is deprecated and part of [https://reablocks.dev](https://reablocks.dev) now. ## ❤️ Contributors