@secondstaxorg/sscomp 1.3.4 → 1.3.9

package/dist/typography.module.css

@@ -0,0 +1,317 @@
+@font-face {
+    font-family: Circular Book;
+    src: url("./fonts/Circular Pro Book.ttf");
+}
+@font-face {
+    font-family: Circular Medium;
+    src: url("./fonts/Circular Pro Medium.ttf");
+}
+@font-face {
+    font-family: Circular Bold;
+    src: url("./fonts/Circular Pro Bold.ttf");
+}
+@font-face {
+    font-family: Circular Black;
+    src: url("./fonts/Circular Pro Black.ttf");
+}
+
+.display1Medium,
+.display2Medium,
+.heading1Medium,
+.heading1SMedium,
+.heading2Medium,
+.heading2SMedium,
+.heading3Medium,
+.heading3SMedium,
+.heading4Medium,
+.heading4SMedium,
+.heading5Medium,
+.heading5SMedium,
+.heading6Medium,
+.heading6SMedium {
+    font-weight: 500;
+    font-family: 'Circular Medium', sans-serif;
+}
+
+.display1Bold,
+.display2Bold,
+.heading1Bold,
+.heading1SBold,
+.heading2Bold,
+.heading2SBold,
+.heading3Bold,
+.heading3SBold,
+.heading4Bold,
+.heading4SBold,
+.heading5Bold,
+.heading5SBold,
+.heading6Bold,
+.heading6SBold {
+    font-weight: 700;
+    font-family: 'Circular Bold', sans-serif;
+}
+
+.display1Black,
+.display2Black,
+.heading1Black,
+.heading1SBlack,
+.heading2Black,
+.heading2SBlack,
+.heading3Black,
+.heading3SBlack,
+.heading4Black,
+.heading4SBlack,
+.heading5Black,
+.heading5SBlack,
+.heading6Black,
+.heading6SBlack {
+    font-weight: 900;
+    font-family: 'Circular Black', sans-serif;
+}
+
+.display1Medium,
+.display1Bold,
+.display1Black {
+    font-size: 72px;
+    line-height: 80px;
+    margin: 0;
+}
+
+.display2Medium,
+.display2Bold,
+.display2Black {
+    font-size: 60px;
+    line-height: 72px;
+    margin: 0;
+}
+
+.heading1Medium,
+.heading1Bold,
+.heading1Black {
+    font-size: 48px;
+    line-height: 56px;
+    margin: 0;
+}
+
+.heading1SMedium,
+.heading1SBold,
+.heading1SBlack {
+    font-size: 34px;
+    line-height: 40px;
+    margin: 0;
+}
+
+.heading2Medium,
+.heading2Bold,
+.heading2Black {
+    font-size: 39px;
+    line-height: 47px;
+    margin: 0;
+}
+
+.heading2SMedium,
+.heading2SBold,
+.heading2SBlack {
+    font-size: 33px;
+    line-height: 40px;
+    margin: 0;
+}
+
+.heading3Medium,
+.heading3Bold,
+.heading3Black {
+    font-size: 33px;
+    line-height: 40px;
+    margin: 0;
+}
+
+.heading3SMedium,
+.heading3SBold,
+.heading3SBlack {
+    font-size: 28px;
+    line-height: 34px;
+    margin: 0;
+}
+
+.heading4Medium,
+.heading4Bold,
+.heading4Black {
+    font-size: 28px;
+    line-height: 34px;
+    margin: 0;
+}
+
+.heading4SMedium,
+.heading4SBold,
+.heading4SBlack {
+    font-size: 23px;
+    line-height: 28px;
+    margin: 0;
+}
+
+.heading5Medium,
+.heading5Bold,
+.heading5Black {
+    font-size: 23px;
+    line-height: 28px;
+    margin: 0;
+}
+
+.heading5SMedium,
+.heading5SBold,
+.heading5SBlack {
+    font-size: 19px;
+    line-height: 23px;
+    margin: 0;
+}
+
+.heading6Medium,
+.heading6Bold,
+.heading6Black {
+    font-size: 19px;
+    line-height: 23px;
+    margin: 0;
+}
+
+.heading6SMedium,
+.heading6SBold,
+.heading6SBlack {
+    font-size: 16px;
+    line-height: 19px;
+    margin: 0;
+}
+
+.subheadingRegular,
+.subheadingMedium,
+.subheadingUnderlined {
+    font-size: 20px;
+    line-height: 30px;
+    margin: 0;
+}
+
+.subheadingRegular,
+.subheadingUnderlined {
+    font-weight: 400;
+}
+
+.subheadingMedium {
+    font-weight: 500;
+    font-family: "Circular Medium", sans-serif;
+}
+
+.subheadingUnderlined {
+    text-decoration: underline;
+}
+
+.paragraph1Regular,
+.paragraph1Medium,
+.paragraph1Underlined {
+    font-size: 14px;
+    line-height: 17px;
+    margin: 0;
+}
+
+.paragraph1Regular,
+.paragraph1Underlined {
+    font-weight: 400;
+}
+
+.paragraph1Medium {
+    font-weight: 500;
+    font-family: "Circular Medium", sans-serif;
+}
+
+.paragraph1Underlined {
+    text-decoration: underline;
+}
+
+.paragraph2Regular,
+.paragraph2Medium,
+.paragraph2Underlined {
+    font-size: 16px;
+    line-height: 28px;
+    margin: 0;
+}
+
+.paragraph2Regular,
+.paragraph2Underlined {
+    font-weight: 400;
+}
+
+.paragraph2Medium {
+    font-weight: 500;
+    font-family: "Circular Medium", sans-serif;
+}
+
+.paragraph2Underlined {
+    text-decoration: underline;
+}
+
+.paragraph3Regular,
+.paragraph3Medium,
+.paragraph3Underlined {
+    font-size: 18px;
+    line-height: 21px;
+    margin: 0;
+}
+
+.paragraph3Regular,
+.paragraph3Underlined {
+    font-weight: 400;
+}
+
+.paragraph3Medium {
+    font-weight: 500;
+    font-family: "Circular Medium", sans-serif;
+}
+
+.paragraph3Underlined {
+    text-decoration: underline;
+}
+
+.captionBook {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    font-family: "Circular Book", sans-serif;
+    margin: 0;
+}
+
+.captionMedium,
+.captionAllCaps {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    font-family: "Circular Medium", sans-serif;
+    margin: 0;
+}
+
+.captionAllCaps {
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.footerBook {
+    font-family: 'Circular Book', sans-serif;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: 0.02em;
+}
+
+.footerMedium {
+    font-family: 'Circular Medium', sans-serif;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: 0.02em;
+}
+
+.footerAllCaps {
+    font-family: 'Circular Medium', sans-serif;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}

package/package.json

@@ -1,66 +1,78 @@
 {
   "name": "@secondstaxorg/sscomp",
-  "version": "1.3.4",
+  "version": "1.3.9",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Secondstax/sscomp"
+    "url": "git+https://github.com/Secondstax/sscomp.git"
   },
   "description": "A react component library for secondstax",
   "main": "dist/index.min.js",
   "module": "dist/index.es.js",
   "types": "types/index.d.ts",
   "files": [
-    "dist","types"
+    "dist",
+    "types"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc && rollup -c rollup.config.js",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "predeploy": "npm run build-storybook",
     "deploy-storybook": "gh-pages -d storybook-static",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_2b0f52cf5545391",
+    "chromatic-force": "npx chromatic --project-token=chpt_2b0f52cf5545391 --force-rebuild"
+  },
+  "author": {
+    "name": "augustus Otu, mark obuobi"
   },
-  "author": "augustus Otu, mark obuobi",
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@rollup/plugin-commonjs": "^23.0.7",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^9.0.2",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack4": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack4": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/addon-actions": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addon-mdx-gfm": "7.0.22",
+    "@storybook/react": "^7.0.22",
+    "@storybook/react-webpack5": "7.0.22",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.22",
     "@types/styled-components": "^5.1.26",
     "babel-loader": "^8.2.5",
+    "chromatic": "^6.19.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.2.3",
+    "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-dts": "^5.1.1",
     "rollup-plugin-image": "^1.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "storybook": "7.0.22",
     "styled-components": "^5.3.6",
     "typescript": "^4.8.4",
-    "webpack": "^5.74.0"
+    "webpack": "^5.74.0",
+    "gatsby-plugin-mdx": "^5.11.0",
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
-    "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-sucrase": "^5.0.1",
-    "@secondstaxorg/sscomp": "^1.0.9",
     "axios": "^1.4.0",
     "chart.js": "^3.9.1",
     "dayjs": "^1.11.6",
@@ -75,8 +87,12 @@
     "rollup-plugin-typescript2": "^0.34.1"
   },
   "peerDependencies": {
-    "styled-components": "^5.3.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
+    "styled-components": "^5.3.6"
+  },
+  "bugs": {
+    "url": "https://github.com/Secondstax/sscomp/issues"
+  },
+  "readme": "ERROR: No README data found!",
+  "homepage": "https://github.com/Secondstax/sscomp#readme",
+  "_id": "@secondstaxorg/sscomp@1.3.5"
 }

package/types/components/ActionFailed/ActionFailed.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 import { ActionFailedProps } from "./type";
+/**
+ * Solid button
+ */
 export declare const ActionFailed: (props: ActionFailedProps) => JSX.Element;
 export default ActionFailed;

package/types/components/ActionFailed/type.d.ts

@@ -1,4 +1,10 @@
 export interface ActionFailedProps {
+    /**
+     * Heading message from the response of the action
+     */
     headingText?: string;
+    /**
+     * Text explaining the details of the error
+     */
     subText?: string;
 }

package/types/components/Button/Button.d.ts

@@ -1,4 +1,24 @@
-/// <reference types="react" />
-import { ButtonProps } from "./type";
+import React from "react";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Colour variant of the button
+     */
+    variant?: 'primary' | 'error' | 'warning' | 'success';
+    /**
+     * Size of the button. Whether large, medium or small
+     */
+    size: 'lg' | 'md' | 'sm';
+    /**
+     * State of the button. Whether disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * HTML or text content of the button. Essentially the label.
+     */
+    children: any;
+}
+/**
+ * Solid and Outline buttons
+ */
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/types/components/Button/type.d.ts

@@ -1,7 +1,19 @@
 import React from "react";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Colour variant of the button
+     */
     variant?: 'primary' | 'error' | 'warning' | 'success';
+    /**
+     * Size of the button. Whether large, medium or small
+     */
     size: 'lg' | 'md' | 'sm';
+    /**
+     * State of the button. Whether disabled or not.
+     */
     disabled?: boolean;
+    /**
+     * HTML or text content of the button. Essentially the label.
+     */
     children: any;
 }

package/types/components/PasswordField/type.d.ts

@@ -1,8 +1,8 @@
-export interface PasswordFieldProps {
+import React from "react";
+export interface PasswordFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     subtext?: string;
     disabled?: boolean;
     errMsg?: string;
-    setValue: (a: string) => void;
     placeholder?: string;
 }

package/types/components/Typography/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    ssxTypography: any;
+};
+export default _default;

package/types/components/index.d.ts

@@ -60,4 +60,3 @@ export { default as UserRolesTable } from './UserRolesTable/UserRolesTable';
 export { default as UsersTable } from './UsersTable/UsersTable';
 export { default as WidgetTitle } from './WidgetTitle/WidgetTitle';
 export { default as SSXBar } from './SSXBar/SSXBar';
-export { default as PopupModal } from './PopupModal/PopupModal';

package/types/ui-documentation/colours/style.d.ts

@@ -0,0 +1,2 @@
+export declare const PreviewContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/ui-documentation/typography/style.d.ts

@@ -0,0 +1 @@
+export declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;

package/types/components/Dropshadows/DropShadows.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { CardType } from "./type";
-declare const DropShadows: (props: CardType) => JSX.Element;
-export default DropShadows;