brahma-ui - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/index.d.ts

@@ -1,16 +0,186 @@
-import { Button } from 'components/Button';
-import { Card } from 'components/Card';
-import { Checkbox } from 'components/Checkbox';
-import { Footer } from 'components/Footer';
-import { Input } from 'components/Input';
-import { MediaMatch } from 'components/MediaMatch';
-import { Navbar } from 'components/Navbar';
-import NewCo from 'components/NewCo';
-import { ProgressBar } from 'components/ProgressBar';
-import { Switch } from 'components/Switch';
-import { Tabs } from 'components/Tabs';
-import { TabSelector } from 'components/TabSelector';
-import { Typography } from 'components/Typography';
-import { CustomThemeProvider } from 'styles/customProvider';
-import theme from 'styles/theme';
-export { Button, Switch, Typography, Checkbox, Input, TabSelector, Tabs, Navbar, Card, Footer, ProgressBar, NewCo, CustomThemeProvider, MediaMatch, theme };
+/// <reference types="react" />
+import React$1, { AnchorHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import { TColors } from 'types/colors';
+import { ItemProps as ItemProps$1 } from 'components/Navbar/Navbar';
+import * as styled_components from 'styled-components';
+import { DefaultBreakpoints } from 'styled-media-query';
+
+declare type ButtonTypes = AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>;
+declare type ButtonProps = {
+    size?: 'fullWidth' | 'long' | 'short';
+    type?: 'primary' | 'secondary';
+    color?: TColors;
+    icon?: React$1.ReactNode;
+    iconPlacement?: 'right' | 'left';
+    disabled?: boolean;
+    as?: React$1.ElementType;
+} & ButtonTypes;
+declare function Button({ children, size, type, color, disabled, icon, iconPlacement, ...props }: ButtonProps): JSX.Element;
+
+declare type CardProps = {
+    children: React.ReactNode;
+    color: TColors;
+    backgroundColor?: 'darkGray' | 'black';
+    hoverEffect?: 'single' | 'double';
+};
+declare function Card({ children, color, backgroundColor, hoverEffect }: CardProps): JSX.Element;
+
+declare type CheckboxProps = {
+    color?: TColors;
+    onCheck?: (status: boolean) => void;
+    label?: string;
+    isChecked?: boolean;
+    labelFor?: string;
+    value?: string | ReadonlyArray<string> | number;
+} & InputHTMLAttributes<HTMLInputElement>;
+declare function Checkbox({ onCheck, color, isChecked, label, labelFor, value }: CheckboxProps): JSX.Element;
+
+declare type FooterProps = {
+    socialItems: ItemProps$1[];
+    items: ItemProps$1[];
+};
+declare function Footer({ socialItems, items }: FooterProps): JSX.Element;
+
+declare type InputFieldProps = {
+    onChange?: (value: string) => void;
+    label?: string;
+    value?: string;
+    error?: string;
+    icon?: React$1.ReactNode;
+    iconPosition?: 'left' | 'right';
+    disabled?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
+declare function Input({ label, name, onChange, value, error, icon, iconPosition, disabled, ...props }: InputFieldProps): JSX.Element;
+
+declare type breakpoint = keyof DefaultBreakpoints;
+declare type MediaMatchProps = {
+    greaterThan?: breakpoint;
+    lessThan?: breakpoint;
+};
+declare const _default: styled_components.StyledComponent<"div", any, MediaMatchProps, never>;
+
+declare type ItemProps = {
+    label: string;
+    href: string;
+};
+declare type NavbarProps = {
+    items: ItemProps[];
+};
+declare function Navbar({ items }: NavbarProps): JSX.Element;
+
+declare type ProgressBarProps = {
+    value: number;
+    color: TColors;
+};
+declare function ProgressBar({ value, color }: ProgressBarProps): JSX.Element;
+
+declare type SwitchProps = {
+    color?: TColors;
+    onCheck?: (status: boolean) => void;
+    isChecked?: boolean;
+    label?: string;
+    labelFor?: string;
+    value?: string | ReadonlyArray<string> | number;
+} & InputHTMLAttributes<HTMLInputElement>;
+declare function Switch({ onCheck, color, isChecked, labelFor, label, value }: SwitchProps): JSX.Element;
+
+declare type Tab$1 = {
+    title: string;
+    children: React$1.ReactNode;
+};
+declare type TabsProps = {
+    tabs: Tab$1[];
+    color?: TColors;
+};
+declare function Tabs({ tabs, color }: TabsProps): JSX.Element;
+
+declare type Tab = {
+    title: string;
+    description?: string;
+};
+declare type TabSelectorProps = {
+    tabs: Tab[];
+};
+declare function TabSelector({ tabs }: TabSelectorProps): JSX.Element;
+
+declare type TTypographyType = 'T0' | 'T1' | 'T2' | 'H1' | 'H2' | 'H3' | 'TEXT' | 'BUTTON' | 'DESCRIPTION' | 'TAG';
+declare type TypographyProps = {
+    type: TTypographyType;
+    children: React$1.ReactNode;
+    as?: React$1.ElementType;
+    color?: string;
+};
+declare function Typography({ type, children, color, ...props }: TypographyProps): JSX.Element;
+
+declare const theme: {
+    readonly grid: {
+        readonly container: "130rem";
+        readonly gutter: "3.2rem";
+    };
+    readonly border: {
+        readonly radius: "0.2rem";
+    };
+    readonly font: {
+        readonly family: {
+            readonly neue: "Neue Montreal, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";
+            readonly coanda: "Coanda";
+        };
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly sizes: {
+            readonly xxsmall: "1.4rem";
+            readonly xsmall: "1.8rem";
+            readonly small: "2rem";
+            readonly medium: "3rem";
+            readonly large: "7rem";
+            readonly xlarge: "12rem";
+            readonly xxlarge: "20rem";
+            readonly huge: "23rem";
+        };
+    };
+    readonly colors: {
+        readonly purple: "#A46FFF";
+        readonly aquablue: "#7EDEE0";
+        readonly magenta: "#E861F2";
+        readonly green: "#8DCC86";
+        readonly black: "#000000";
+        readonly lightGray: "#A3A3A3";
+        readonly gray: "#292930";
+        readonly darkGray: "#18181C";
+        readonly white: "#FFFFFF";
+        readonly error: "#EC5851";
+        readonly red: "#FF6347";
+    };
+    readonly spacings: {
+        readonly xxsmall: "0.8rem";
+        readonly xsmall: "1.6rem";
+        readonly small: "2.4rem";
+        readonly medium: "3.2rem";
+        readonly large: "4.0rem";
+        readonly xlarge: "4.8rem";
+        readonly xxlarge: "5.6rem";
+    };
+    readonly layers: {
+        readonly base: 10;
+        readonly menu: 20;
+        readonly overlay: 30;
+        readonly modal: 40;
+        readonly alwaysOnTop: 50;
+    };
+    readonly transition: {
+        readonly default: "0.3s ease-in-out";
+        readonly fast: "0.1s ease-in-out";
+        readonly long: "0.7s ease-in-out";
+    };
+};
+declare type Theme = typeof theme;
+
+declare type CustomThemeProviderProps = {
+    theme: Theme;
+    children: React.ReactNode;
+};
+declare const CustomThemeProvider: ({ theme, children }: CustomThemeProviderProps) => JSX.Element;
+
+export { Button, Card, Checkbox, CustomThemeProvider, Footer, Input, _default as MediaMatch, Navbar, ProgressBar, Switch, TabSelector, Tabs, Typography, theme };

package.json

 {
   "name": "brahma-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "",
@@ -5,0 +5,0 @@ "scripts": {

rollup.config.js

@@ -8,38 +8,47 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import url from '@rollup/plugin-url'
+import dts from 'rollup-plugin-dts'
 
 import packageJson from './package.json'
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: packageJson.main,
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: packageJson.module,
-      format: 'esm',
-      sourcemap: true
-    }
-  ],
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({ useTsconfigDeclarationDir: true }),
-    copy({
-      assets: [
-        // You can include directories
-        'src/assets/images',
-        'src/assets/fonts'
-      ]
-    }),
-    image(),
-    url({
-      include: ['**/*.woff2'],
-      limit: Infinity
-    })
-  ],
-  external: ['react', 'react-dom']
-}
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      copy({
+        assets: ['src/assets/images', 'src/assets/fonts']
+      }),
+      image(),
+      url({
+        include: ['**/*.woff2'],
+        limit: Infinity
+      })
+    ],
+    external: ['react', 'react-dom']
+  },
+  {
+    input: 'lib/index.d.ts',
+    output: [
+      {
+        file: 'lib/index.d.ts',
+        format: 'esm'
+      }
+    ],
+    plugins: [dts()]
+  }
+]

src/index.ts

@@ -1,33 +0,34 @@
-import { Button } from 'components/Button'
-import { Card } from 'components/Card'
-import { Checkbox } from 'components/Checkbox'
-import { Footer } from 'components/Footer'
-import { Input } from 'components/Input'
-import { MediaMatch } from 'components/MediaMatch'
-import { Navbar } from 'components/Navbar'
-import NewCo from 'components/NewCo'
-import { ProgressBar } from 'components/ProgressBar'
-import { Switch } from 'components/Switch'
-import { Tabs } from 'components/Tabs'
-import { TabSelector } from 'components/TabSelector'
-import { Typography } from 'components/Typography'
-import { CustomThemeProvider } from 'styles/customProvider'
-import theme from 'styles/theme'
+// import { Button } from 'components/Button'
+// import { Card } from 'components/Card'
+// import { Checkbox } from 'components/Checkbox'
+// import { Footer } from 'components/Footer'
+// import { Input } from 'components/Input'
+// import { MediaMatch } from 'components/MediaMatch'
+// import { Navbar } from 'components/Navbar'
+// import NewCo from 'components/NewCo'
+// import { ProgressBar } from 'components/ProgressBar'
+// import { Switch } from 'components/Switch'
+// import { Tabs } from 'components/Tabs'
+// import { TabSelector } from 'components/TabSelector'
+// import { Typography } from 'components/Typography'
+// import { CustomThemeProvider } from 'styles/customProvider'
+// import theme from 'styles/theme'
 
-export {
-  Button,
-  Switch,
-  Typography,
-  Checkbox,
-  Input,
-  TabSelector,
-  Tabs,
-  Navbar,
-  Card,
-  Footer,
-  ProgressBar,
-  NewCo,
-  CustomThemeProvider,
-  MediaMatch,
-  theme
-}
+// export {
+//   Button,
+//   Switch,
+//   Typography,
+//   Checkbox,
+//   Input,
+//   TabSelector,
+//   Tabs,
+//   Navbar,
+//   Card,
+//   Footer,
+//   ProgressBar,
+//   NewCo,
+//   CustomThemeProvider,
+//   MediaMatch,
+//   theme
+// }
+export * from './components'

tsconfig.json

@@ -23,3 +23,8 @@ {
   "include": ["src", "index.d.ts"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": [
+    "node_modules",
+    "lib",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx"
+  ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

768122

increased by0.3%

Lines of code

4862

increased by2.16%

Worsened metrics

Number of package files

162

decreased by-7.95%

No dependency changes