@sikka/hawa 0.0.2 → 0.0.5

package/package.json

@@ -1,47 +1,62 @@
-{
-  "name": "@sikka/hawa",
-  "version": "0.0.2",
-  "description": "UI Kit",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "start-storybook -p 6006",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-lib": "rollup -c"
-  },
-  "author": "SIKKA SOFTWARE",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-react": "^7.12.10",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@storybook/addon-actions": "^6.4.7",
-    "@storybook/addon-essentials": "^6.4.7",
-    "@storybook/addon-links": "^6.4.7",
-    "@storybook/react": "^6.4.7",
-    "babel-loader": "^8.2.2",
-    "framer-motion": "^4.1.7",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rollup": "^2.38.4",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "*",
-    "prop-types": "^15.7.2",
-    "react-hook-form": "^7.20.4",
-    "tinycolor2": "^1.4.2"
-  }
-}
+{
+  "name": "@sikka/hawa",
+  "version": "0.0.5",
+  "description": "UI Kit",
+  "main": "lib/index.js",
+  "module": "es/index.es.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-lib": "rollup -c",
+    "build:styles": " node tools/build-styles"
+  },
+  "author": "SIKKA SOFTWARE",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@paypal/react-paypal-js": "^7.6.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-actions": "^6.4.7",
+    "@storybook/addon-essentials": "^6.4.7",
+    "@storybook/addon-links": "^6.4.7",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.7",
+    "@storybook/theming": "^6.4.19",
+    "axios": "^0.26.1",
+    "babel-loader": "^8.2.2",
+    "crypto-js": "^4.1.1",
+    "framer-motion": "^4.1.7",
+    "next": "^12.1.0",
+    "next-scripts": "^0.3.4",
+    "next-translate": "^1.3.5",
+    "qs": "^6.10.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-transition-group": "^4.4.2",
+    "rollup": "^2.38.4",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.5.1",
+    "crypto-js": "^4.1.1",
+    "next-scripts": "^0.3.4",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "^7.20.4",
+    "react-transition-group": "^4.4.2",
+    "tinycolor2": "^1.4.2"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.5.1"
+  }
+}

package/rollup.config.js

@@ -1,30 +1,30 @@
-import babel from "rollup-plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
-import external from "rollup-plugin-peer-deps-external";
-import { terser } from "rollup-plugin-terser";
-import postcss from "rollup-plugin-postcss";
-import commonjs from "@rollup/plugin-commonjs";
-
-export default [
-  {
-    input: "src/index.js",
-    output: [
-      { file: "dist/index.js", format: "cjs" },
-      { file: "dist/index.es.js", format: "es", exports: "named" }
-    ],
-    plugins: [
-      postcss({ plugins: [], minimize: true }),
-      babel({
-        exclude: "node_modules/**",
-        presets: [
-          "@babel/preset-env",
-          ["@babel/preset-react", { runtime: "automatic" }]
-        ]
-      }),
-      external(),
-      resolve(),
-      terser(),
-      commonjs()
-    ]
-  }
-];
+import babel from "rollup-plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import external from "rollup-plugin-peer-deps-external";
+import { terser } from "rollup-plugin-terser";
+import postcss from "rollup-plugin-postcss";
+import commonjs from "@rollup/plugin-commonjs";
+
+export default [
+  {
+    input: "src/index.js",
+    output: [
+      { file: "lib/index.js", format: "cjs" },
+      { file: "es/index.es.js", format: "es", exports: "named" }
+    ],
+    plugins: [
+      postcss({ plugins: [], minimize: true }),
+      babel({
+        exclude: "node_modules/**",
+        presets: [
+          "@babel/preset-env",
+          ["@babel/preset-react", { runtime: "automatic" }]
+        ]
+      }),
+      external(),
+      resolve(),
+      terser(),
+      commonjs()
+    ]
+  }
+];

package/src/blocks/Account/UserProfile.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { HawaInputLabel, ActionButton } from "../../ui";
+import { Box } from "../../layout";
+
+export const UserProfile = (props) => {
+  return (
+    <Box maxWidth={400}>
+      <HawaInputLabel type="text" inputLabel="First Name" />
+      <HawaInputLabel type="text" inputLabel="Last Name" />
+      <HawaInputLabel type="email" inputLabel="Email" />
+      <HawaInputLabel type="password" inputLabel="Password" />
+      <ActionButton last text="Update Account" />
+    </Box>
+  );
+};

package/src/blocks/Account/UserSettings.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { HawaTextField, ActionButton } from "../../ui";
+import { Box } from "../../layout";
+
+export const UserSettings = (props) => {
+  return (
+    <Box maxWidth={400}>
+      <HawaTextField type="text" inputLabel="First Name" />
+      <HawaTextField type="text" inputLabel="Last Name" />
+      <HawaTextField type="email" inputLabel="Email" />
+      <HawaTextField type="password" inputLabel="Password" />
+      <ActionButton last text="Update Account" />
+    </Box>
+  );
+};

package/src/blocks/Account/index.js

@@ -0,0 +1,2 @@
+export * from "./UserProfile.js";
+export * from "./UserSettings.js";

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -0,0 +1,24 @@
+import React, { useContext } from "react";
+import { Box } from "../../layout";
+import { ThemeProvider } from "../../themes/HawaProvider";
+import { ActionButton, HawaTextField, HawaInputLabel } from "../../ui";
+export const NewPasswordForm = (props) => {
+  const theme = useContext(ThemeProvider);
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField
+          themeType={props.theme}
+          type="password"
+          inputLabel="Password"
+        />
+        <HawaTextField
+          themeType={props.theme}
+          type="password"
+          inputLabel="Confirm Password"
+        />
+        <ActionButton themeType={props.theme} last text="Reset Password" />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Box } from "../../layout";
+import { HawaTextField, HawaInputLabel, ActionButton } from "../../ui";
+export const ResetPasswordForm = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+        <ActionButton themeType={props.theme} last text="Reset Password" />
+      </Box>
+    </Box>
+  );
+};

package/src/blocks/AuthForms/SignInForm.js

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton
+} from "../../ui";
+import { Box } from "../../layout";
+
+export const SignInForm = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+
+        <HawaTextField
+          themeType={props.theme}
+          type="text"
+          inputLabel="Password"
+        />
+        <ActionButton
+          last
+          text={"Sign In"}
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          themeType={props.theme}
+          outlined
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignIn}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
+    </Box>
+  );
+};

package/src/blocks/AuthForms/SignUpForm.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box } from "../../layout";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  GithubButton,
+  TwitterButton
+} from "../../ui";
+import PropTypes from "prop-types";
+
+export const SignUpForm = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+        <HawaTextField
+          themeType={props.theme}
+          type="text"
+          inputLabel="Password"
+        />
+        <HawaTextField
+          themeType={props.theme}
+          type="text"
+          inputLabel="Confirm Password"
+        />
+        <ActionButton
+          text="Sign Up"
+          last
+          themeType={props.theme}
+          onClick={props.handleSignUp}
+        />
+      </Box>
+      {props.viaGoogle && (
+        <GoogleButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.googleButtonLabel}
+          handleClick={props.handleGoogleSignIn}
+        />
+      )}
+      {props.viaGithub && (
+        <GithubButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.githubButtonLabel}
+          handleClick={props.handleGithubSignUp}
+        />
+      )}
+      {props.viaTwitter && (
+        <TwitterButton
+          outlined
+          themeType={props.theme}
+          buttonText={props.twitterButtonLabel}
+          handleClick={props.handleTwitterSignIn}
+        />
+      )}
+    </Box>
+  );
+};
+
+SignUpForm.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"])
+  // buttonLabel: PropTypes.string,
+  // danger: PropTypes.bool,
+  // disabled: PropTypes.bool,
+  // showText: PropTypes.bool
+};

package/src/{components/Hawa → blocks}/AuthForms/index.js

@@ -1,4 +1,4 @@
-export * from "./NewPasswordForm.js";
-export * from "./ResetPasswordForm.js";
-export * from "./SignUpForm.js";
-export * from "./SignInForm.js";
+export * from "./NewPasswordForm.js";
+export * from "./ResetPasswordForm.js";
+export * from "./SignUpForm.js";
+export * from "./SignInForm.js";

package/src/blocks/Payment/CreditCardForm.js

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton
+} from "../../ui";
+import { Box } from "../../layout";
+
+export const CreditCardForm = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <HawaTextField themeType={props.theme} type="text" inputLabel="Email" />
+
+        <HawaTextField
+          themeType={props.theme}
+          type="text"
+          inputLabel="Password"
+        />
+        <ActionButton
+          last
+          text={"Sign In"}
+          themeType={props.theme}
+          onClick={props.handleSignIn}
+        />
+      </Box>
+    </Box>
+  );
+};