@thecb/components 6.3.1-beta.2 → 6.3.1-beta.5

package/README.md

@@ -63,6 +63,41 @@ Please include new component stories as this library will also be a sandbox.
 
 - If a non-form component contains integration with application state, or business logic specific to a particular application, breaking the component up into styled/layout atoms and an application specific molecule that consumes them is the best practice. An example of this can be observed with the `Header` and `Footer` molecules in Navigate Frontend. Both of these molcules make use of component library atoms such as `NavHeader` to layout out content. NFE then has `Header` and `Footer` molecules which live in the NFE components directory and use NFE specific business logic to provide content to these atoms, resulting in a complete `Header` and `Footer`.
 
+## Adding Typescript declarations
+
+Any components used in a Typescript app need a declaration file.
+
+1. Create a `index.d.ts` file in the directory for that component that exports the typed component constant.
+   Use the `Expand` interface found in `./src/util/expand` so the full props will appear on hover in VSCode. Extend `React.HTMLAttributes<HTMLElement>>` to add all html props and event handlers. e.g.:
+
+```
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface ButtonWithActionProps {
+  action?: React.SyntheticEvent;
+  variant?: string;
+  text?: string;
+  textWrap?: boolean;
+  isLoading?: boolean;
+  textExtraStyles?: string;
+  contentOverride?: boolean;
+  extraStyles?: string;
+  tabIndex?: number;
+}
+
+export const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
+React.HTMLAttributes<HTMLElement>>;
+```
+
+2. Export the component from the `index.d.ts` in the top-level directory for your component, i.e. `src/components/atoms/index.d.ts`. e.g:
+
+```
+...
+export * from "./button-with-action";
+...
+```
+
 ## Version bumping and publishing
 
 ### Version bumping and Publishing to NPM
@@ -120,6 +155,10 @@ Next go to the `@thecb/components` and in the command line
 
 Now the package is unlinked, and you’re using the version on NPM.
 
+### Yalc
+
+If you encounter issues using `yarn link`, a nice alternative is `yalc`. See [https://github.com/wclr/yalc](https://github.com/wclr/yalc) for usage instructions.
+
 ### Importing and using components
 
 To use components, you need to import the desired components inside the file you’d like them in. For example, to import the `<ButtonWithAction />` component into a file