From 9a762c1d8613c3a72739294973ed7185ee848241 Mon Sep 17 00:00:00 2001 From: Prince Anuragi Date: Mon, 11 Sep 2023 13:48:57 +0530 Subject: [PATCH] fix: updated readme and bump version (#10) (#11) * fix(README): updated readme * chore: bump version --- README.md | 71 +++++---------------------------------------------- custom_css.md | 65 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 3 files changed, 73 insertions(+), 65 deletions(-) create mode 100644 custom_css.md diff --git a/README.md b/README.md index 3e2a69f..ce48bab 100644 --- a/README.md +++ b/README.md @@ -12,74 +12,17 @@ This package helps you render the forms via abi, and have input validations buil - You can add your styling with as below by overriding css from a new css file. - Checkout sample react project at [/example/react-app/starknet-abi-form-driver](https://github.com/NethermindEth/starknet-abi-form/tree/dev/example/react-app/starknet-abi-form-driver/) -# Overriding CSS +# Using Custom CSS -- You can override styling by using below classes with different parts of the package - -### Tabs - -- `tab-root` Tabs Root wrapper class -- `tab-triggers-wrapper` Tabs Trigger wrapper class -- `tab-trigger` Tabs Called Read and Write wrapper class -- `tab-content` Active Tab Content displayed class - -### Function - -- `function-root` Root wrapper for function -- `function-header` Header for function with name and inputs -- `function-response` Response Wrapper usually injected by using code -- `function-form` Form class -- `function-form-submit`Form Submission button class -- `function-form-input-wrapper` A Wrapper which wraps input with tags and labels -- `input-label` Label for an Input class -- `input-tag` Tab for type of that input's class -- `input-error` Error mentioning class -- `function-form-input` Input for the form class -- `tooltip-input-final-value` The final value which will goto the contract call/invoke -- `tooltip-input-text-hint` Hint tooltip value for input final value -- `function-struct` Wrapper for a struct -- `function-struct-header` Header with struct name inside the wrapper -- `function-array-root` Main wrapper for an array type -- `function-array-header` Header for that array type -- `array-title` Title for the array as in ABI Name -- `array-add` Add button to add array item -- `array-core-item` An Core type item wrapper -- `array-core-item-delete` Delete button to delete core type item wrapper -- `array-complex-item` An Complex type item wrapper can be a struct (i.e in case array) -- `array-complex-item-trigger` Trigger for accordian acts as button to open and close -- `array-complex-item-delete` Delete Button to delete complex item -- `array-complex-item-header` Header text for the complex item in trigger -- `array-complex-item-content` Content of the complex type - -### Others - -- `invalid-abi` text when an abi is not valid -- `failed-parse-type` text when a type can't be parsed - -### Tags - -- `tag-blue` Tag default styling of blue -- `tag-gray` Tag default styling of gray -- `tag-green` Tag default styling of green -- `tag-indigo` Tag default styling of indigo -- `tag-pink` Tag default styling of pink -- `tag-purple` Tag default styling of purple -- `tag-red` Tag default styling of red -- `tag-yellow` Tag default styling of yellow - -### Buttons - -- `btn-blue` Button with default blue styling -- `btn-green` Button with default green styling -- `btn-cyan` Button with default cyan styling -- `btn-teal` Button with default teal styling -- `btn-lime` Button with default lime styling -- `btn-red` Button with default red styling -- `btn-pink` Button with default pink styling -- `btn-purple` Button with default purple styling +- [here](https://github.com/NethermindEth/starknet-abi-form/tree/dev/custom_css.md) # Building Locally - `pnpm install` - to install dependencies initially - `pnpm dev` - to run in development mode in storybook - `yalc publish` - to publish to local pnpm store + +# RoadMap + +- Support enums in function params +- Support for Cairo v1, v0 diff --git a/custom_css.md b/custom_css.md new file mode 100644 index 0000000..d181758 --- /dev/null +++ b/custom_css.md @@ -0,0 +1,65 @@ +# Overriding CSS + +- You can override styling by using below classes with different parts of the package + +### Tabs + +- `tab-root` Tabs Root wrapper class +- `tab-triggers-wrapper` Tabs Trigger wrapper class +- `tab-trigger` Tabs Called Read and Write wrapper class +- `tab-content` Active Tab Content displayed class + +### Function + +- `function-root` Root wrapper for function +- `function-header` Header for function with name and inputs +- `function-response` Response Wrapper usually injected by using code +- `function-form` Form class +- `function-form-submit`Form Submission button class +- `function-form-input-wrapper` A Wrapper which wraps input with tags and labels +- `input-label` Label for an Input class +- `input-tag` Tab for type of that input's class +- `input-error` Error mentioning class +- `function-form-input` Input for the form class +- `tooltip-input-final-value` The final value which will goto the contract call/invoke +- `tooltip-input-text-hint` Hint tooltip value for input final value +- `function-struct` Wrapper for a struct +- `function-struct-header` Header with struct name inside the wrapper +- `function-array-root` Main wrapper for an array type +- `function-array-header` Header for that array type +- `array-title` Title for the array as in ABI Name +- `array-add` Add button to add array item +- `array-core-item` An Core type item wrapper +- `array-core-item-delete` Delete button to delete core type item wrapper +- `array-complex-item` An Complex type item wrapper can be a struct (i.e in case array) +- `array-complex-item-trigger` Trigger for accordian acts as button to open and close +- `array-complex-item-delete` Delete Button to delete complex item +- `array-complex-item-header` Header text for the complex item in trigger +- `array-complex-item-content` Content of the complex type + +### Others + +- `invalid-abi` text when an abi is not valid +- `failed-parse-type` text when a type can't be parsed + +### Tags + +- `tag-blue` Tag default styling of blue +- `tag-gray` Tag default styling of gray +- `tag-green` Tag default styling of green +- `tag-indigo` Tag default styling of indigo +- `tag-pink` Tag default styling of pink +- `tag-purple` Tag default styling of purple +- `tag-red` Tag default styling of red +- `tag-yellow` Tag default styling of yellow + +### Buttons + +- `btn-blue` Button with default blue styling +- `btn-green` Button with default green styling +- `btn-cyan` Button with default cyan styling +- `btn-teal` Button with default teal styling +- `btn-lime` Button with default lime styling +- `btn-red` Button with default red styling +- `btn-pink` Button with default pink styling +- `btn-purple` Button with default purple styling diff --git a/package.json b/package.json index eff89e1..2a1b39d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "starknet-abi-forms", "description": "A Starknet ABI Form Parser, with type Validations for Starknet Contracts and making integration faster with Starknet.", - "version": "0.1.2", + "version": "0.1.3", "author": "Prince Anuragi ", "license": "MIT", "keywords": [