@zesty-io/material 0.0.0 → 0.0.2

package/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

package/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package/es/index.d.ts

@@ -0,0 +1 @@
+export { default as theme } from './theme';

package/es/index.js

@@ -0,0 +1 @@
+export { default as theme } from './theme';

package/es/stories/Theme.stories.d.ts

@@ -0,0 +1,4 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<import("@storybook/react/types-6-0").Args>;

package/es/stories/Theme.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactJson from 'react-json-view';
+import theme from '../theme';
+export default {
+    title: 'Theme',
+};
+const Template = (args) => {
+    return (_jsx(ReactJson, { src: theme }));
+};
+export const Default = Template.bind({});

package/es/theme/index.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@mui/material/styles';
+declare let theme: Theme;
+export default theme;

package/es/theme/index.js

@@ -0,0 +1,23 @@
+import palette from './palette';
+import typography from './typography';
+import { createTheme } from '@mui/material/styles';
+let theme = createTheme({
+    palette,
+    typography,
+});
+theme = createTheme(theme, {
+    MuiTooltip: {
+        styleOverrides: {
+            tooltip: {
+                color: theme.palette.primary.contrastText,
+                backgroundColor: theme.palette.primary.main,
+                fontSize: "14px",
+                lineHeight: "20px",
+            },
+            arrow: {
+                color: theme.palette.primary.main,
+            }
+        }
+    }
+});
+export default theme;

package/es/theme/palette.d.ts

@@ -0,0 +1,3 @@
+import { PaletteOptions } from '@mui/material/styles';
+declare const palette: PaletteOptions;
+export default palette;

package/es/theme/palette.js

@@ -0,0 +1,36 @@
+const palette = {
+    primary: {
+        main: '#404759',
+        contrastText: '#ffffff',
+    },
+    secondary: {
+        main: '#497edf',
+        contrastText: '#ffffff',
+    },
+    success: {
+        main: '#75bf25',
+        contrastText: '#ffffff',
+    },
+    warning: {
+        main: '#f17829',
+        contrastText: '#ffffff',
+    },
+    error: {
+        main: '#e53c05',
+        contrastText: '#ffffff',
+    },
+    // action: {
+    //   active: 'rgba(0,0,0,54)',
+    //   hover: 'rgba(0,0,0,0.04)',
+    //   hoverOpacity: 0.04,
+    //   selected: 'rgba(0,0,0,0.08)',
+    //   selectedOpacity: 0.08,
+    //   disabled: 'rgba(26, 32, 44, 0.4)',
+    //   disabledBackground: 'rgba(26, 32, 44, 0.12)',
+    //   disabledOpacity: 0.4,
+    //   focus: 'rgba(0,0,0,0.12)',
+    //   focusOpacity: 0.12,
+    //   activatedOpacity: 0.12,
+    // },
+};
+export default palette;

package/es/theme/typography.d.ts

@@ -0,0 +1,3 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+declare const typography: TypographyVariantsOptions;
+export default typography;

package/es/theme/typography.js

@@ -0,0 +1,4 @@
+const typography = {
+    fontFamily: "'Mulish'",
+};
+export default typography;

package/package.json

@@ -1,21 +1,50 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "description": "Contains custom components which are in addition to the @mui design-system",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "npm publish --access public",
-    "release:alpha": "npm publish --access public --tag alpha"
-  },
+  "author": "Zesty.io",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zesty-io/material.git"
   },
-  "author": "",
-  "license": "ISC",
   "bugs": {
     "url": "https://github.com/zesty-io/material/issues"
   },
-  "homepage": "https://github.com/zesty-io/material#readme"
+  "homepage": "https://zesty-io.github.io/material",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prerelease": "npm test",
+    "release": "npm run build && npm publish --access public",
+    "release:alpha": "npm run build && npm publish --access public --tag alpha",
+    "postrelease": "rm -rf /es",
+    "deploy": "npm run build-storybook && gh-pages -d storybook-static",
+    "test": "echo 'add tests'",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "0.0.11",
+    "babel-loader": "^8.2.5",
+    "gh-pages": "^3.2.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-json-view": "^1.21.3",
+    "typescript": "^4.6.3"
+  }
 }

package/src/index.ts

@@ -0,0 +1 @@
+export { default as theme } from './theme';

package/src/stories/Theme.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactJson from 'react-json-view'
+import { Story, Meta } from '@storybook/react/types-6-0';
+import theme from '../theme';
+
+export default {
+  title: 'Theme',
+} as Meta;
+
+const Template: Story = (args) => {
+  return (
+    <ReactJson src={theme} />
+  );
+};
+
+export const Default = Template.bind({});

package/src/theme/index.ts

@@ -0,0 +1,25 @@
+import palette from './palette';
+import typography from './typography';
+import { createTheme, Theme } from '@mui/material/styles';
+
+let theme: Theme = createTheme({
+  palette,
+  typography,
+});
+
+theme = createTheme(theme, {
+  MuiTooltip: {
+      styleOverrides: {
+          tooltip: {
+              color: theme.palette.primary.contrastText,
+              backgroundColor: theme.palette.primary.main,
+              fontSize: "14px",
+              lineHeight: "20px",
+          },
+          arrow: {
+              color: theme.palette.primary.main,
+          }
+      }
+  }
+})
+export default theme;

package/src/theme/palette.ts

@@ -0,0 +1,38 @@
+import { PaletteOptions } from '@mui/material/styles';
+const palette: PaletteOptions = {
+  primary: {
+    main: '#404759',
+    contrastText: '#ffffff',
+  },
+  secondary: {
+    main: '#497edf',
+    contrastText: '#ffffff',
+  },
+  success: {
+    main: '#75bf25',
+    contrastText: '#ffffff',
+  },
+  warning: {
+    main: '#f17829',
+    contrastText: '#ffffff',
+  },
+  error: {
+    main: '#e53c05',
+    contrastText: '#ffffff',
+  },
+  // action: {
+  //   active: 'rgba(0,0,0,54)',
+  //   hover: 'rgba(0,0,0,0.04)',
+  //   hoverOpacity: 0.04,
+  //   selected: 'rgba(0,0,0,0.08)',
+  //   selectedOpacity: 0.08,
+  //   disabled: 'rgba(26, 32, 44, 0.4)',
+  //   disabledBackground: 'rgba(26, 32, 44, 0.12)',
+  //   disabledOpacity: 0.4,
+  //   focus: 'rgba(0,0,0,0.12)',
+  //   focusOpacity: 0.12,
+  //   activatedOpacity: 0.12,
+  // },
+};
+
+export default palette;

package/src/theme/typography.ts

@@ -0,0 +1,7 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+
+const typography: TypographyVariantsOptions = {
+  fontFamily: "'Mulish'",
+};
+
+export default typography;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "outDir": "es",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true,
+    "jsx": "react-jsx",
+  },
+  "include": ["src"],
+}