feat: add new-branding components (#47)

* feat: add Search component * add PropTypes validation and fix linter errors (#43) * add PropTypes validation and fix linter errors * run formatter * fix typo * Add Icons and tags (#44) * Add icons * Add tags * add accidentally deleted icons * run formatter for all files * add args to fix typecheck errors * Add pills (#45) * add pills * format code * feat: New Card for BDP (#46) * chore(new-components): new componens from branding * feat(card): bdp card addition * chore:initial commit * --amend --------- Co-authored-by: 0tuedon <90271995+0tuedon@users.noreply.github.com>

Author: jrakibi

.github/CONTRIBUTING.md

@@ -24,4 +24,4 @@ Make your changes and check that they resolve the problem with an example in Sto
 
 You also need to inform Yarn workspaces that a particular package has changed for proper versioning. Run `yarn version check -i` to mark the appropriate type of change for those packages.
 
-Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request.
+Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request.

.github/workflows/check-code.yml

@@ -22,10 +22,9 @@ jobs:
 
  - name: Run lint
  run: yarn lint
- 
+
  - name: Check formatting
  run: yarn format:check
 
  - name: Run typecheck
  run: yarn typecheck
-

.npmignore

@@ -0,0 +1 @@
+assets/images

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
+ staticDirs: ['../src/assets/images'],
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
  "@storybook/addon-webpack5-compiler-swc",

README.md

@@ -9,7 +9,9 @@ To install the BDP-UI library, you can use the following command:
 ```bash
 yarn add @bitcoin-dev-project/bdp-ui
 ```
-or 
+
+or
+
 ```bash
 npm i @bitcoin-dev-project/bdp-ui
 ```
@@ -19,10 +21,12 @@ npm i @bitcoin-dev-project/bdp-ui
 Once installed, you can import the components or icons you need from the library:
 
 ## CSS workaround
+
 Kindly import the css file to your global entry point.
 Usually, that is `app/layout.tsx`
 
 _note: import the css before your global css so if there are any conflicts your css takes precedence_
+
 ```tsx
 // app/layout.tsx
 ...
@@ -33,6 +37,7 @@ import "./globals.css";
 
 If you use tailwind for styling, also point your tailwind config to the library
 i.e
+
 ```tsx
 // tailwind.config.ts
 ...
@@ -47,31 +52,29 @@ const config: Config = {
 ```
 
 ### Components
+
 Here is how you can import and use components
 
 ```jsx
-import { Button } from '@bitcoin-dev-project/bdp-ui';
+import { Button } from "@bitcoin-dev-project/bdp-ui";
 
 function App() {
- return (
- <Button>Hello, World!</Button>
- );
+ return <Button>Hello, World!</Button>;
 }
 ```
 
 ### Icons
+
 Here is how you can import icons
 
 ```jsx
-import { GithubIcon } from '@bitcoin-dev-project/bdp-ui/icons';
+import { GithubIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 
 function App() {
- return (
- <GithubIcon className="w-[40px] text-black" />
- );
+ return <GithubIcon className="w-[40px] text-black" />;
 }
 ```
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details 
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details