@protonradio/proton-ui 0.1.31 → 0.1.33

package/README.md

@@ -5,3 +5,44 @@
 ```
 npm run storybook
 ```
+
+### Publishing Updates to NPM
+```
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
+```
+
+### Themes
+This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
+
+#### Adding a Theme
+The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEME_CONFIG` object following the pattern `[themeName]: [themeClassName]`.
+
+When applying to a project, you can import available themes using `THEME_CONFIG` from this library and apply the theme an outer div on the application. See below for an example.
+
+```jsx
+import { THEME_CONFIG } from '@protonradio/proton-ui'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <div className={THEME_CONFIG.ReleaseLinks}> {/* Set your theme here */}
+      <Component {...pageProps} />
+    </div>
+  );
+}
+```
+
+#### Styling for a theme
+To apply theme specific styles in a component, you can select using the class name that belongs to the theme (see `src/themes/config.ts`). For example, to apply a style to the `ReleaseLinks` theme, you can use the following css.
+
+Theme specific css should be placed in the `src/themes` directory in a unqiue file for the theme and component. The file naming convention should be `[componentName].[themeClassName].css`.
+
+```css
+.ReleaseLinks .myComponent {
+  background-color: red;
+}
+```
+
+### Recommended Reading
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/proton-ui.es.d.ts

@@ -1,5 +1,10 @@
+import { ColumnProps } from '@react-stately/table';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { PressEvent } from 'react-aria';
+import { Row } from '@react-stately/table';
+import { Section } from '@react-stately/table';
+import { TableBody } from '@react-stately/table';
+import { TableHeader } from '@react-stately/table';
 
 export declare function Button(props: ButtonProps): JSX_2.Element;
 
@@ -70,6 +75,10 @@ declare interface ButtonProps {
     children?: React.ReactNode;
 }
 
+export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX_2.Element;
+
+export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX_2.Element;
+
 export declare function Icon(props: IconProps): JSX_2.Element;
 
 declare type IconID = "external-link";
@@ -89,6 +98,14 @@ declare interface IconProps {
     color?: string;
 }
 
+export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
+    align?: "left" | "center" | "right";
+}
+
+export { Row }
+
+export { Section }
+
 export declare function Switch(props: SwitchProps): JSX_2.Element;
 
 export declare namespace Switch {
@@ -126,4 +143,15 @@ declare interface SwitchProps {
     children?: React.ReactNode;
 }
 
+export declare function Table(props: any): JSX_2.Element;
+
+export { TableBody }
+
+export { TableHeader }
+
+export declare const THEME_CONFIG: {
+    readonly ReleaseLinks: "rl-theme";
+    readonly ProtonRadio: "client-theme";
+};
+
 export { }