@gyramais/gyra-design 0.1.0

package/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "keyword-spacing": ["error", { "after": true, "before": true }],
+    "comma-dangle": ["error", "always-multiline"],
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "space-in-parens": ["error", "never"],
+    "no-trailing-spaces": ["error"],
+    "no-multi-spaces": ["error"]
+  }
+}

package/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+    defaultName: 'Overview',
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,45 @@
+import '../src/index.css'
+import 'react-toastify/dist/ReactToastify.css';
+import 'react-modern-drawer/dist/index.css'
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'grey',
+      values: [{
+        name: 'black',
+        value: '#000000',
+      }, {
+        name: 'grey',
+        value: '#eeecec',
+      }, {
+        name: 'white',
+        value: '#ffffff',
+      }],
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      exclude: [
+        'children',
+        'onClick',
+      ]
+    },
+    docs: {
+      controls: {
+        exclude: [
+          'children',
+          'onClick',
+        ]
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,31 @@
+# gyra-design
+
+Pacote de componentes da Gyramais com o intuito de padronizar e afunilar todos os componentes de projetos.
+## Stack utilizada
+
+- **Componentes:** Typescript, React, TailwindCSS
+- **Documentação:** Storybook
+- **Bundler:** Rollup
+
+## Funcionalidades
+
+- Tema personalizável
+- Componentes padrão da Gyramais
+
+## Comandos
+
+Baixe o projeto em gyramais/gyra-design
+```bash
+  npm install
+  npm run storybook
+```
+
+Para realizar o build do pacote completo
+```
+  npm run build 
+```
+    
+Para realizar o build de um componente específico (ex: Button)
+```
+  npm run build --component=Button
+```

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";var t=function(t){var e=t.replace("#","");return(299*parseInt(e.substr(0,2),16)+587*parseInt(e.substr(2,2),16)+114*parseInt(e.substr(4,2),16))/1e3<=128},e=function(e){return t(e)?"#ffffff":"#2b2b2b"},o=function(t,e){t.length>6&&(t=t.substring(1,t.length));var o=parseInt(t,16),r=Math.abs((o>>16&255)+e);r>255&&(r-=r-255);var n=Math.abs((o>>8&255)+e);n>255&&(n-=n-255);var c=Math.abs((255&o)+e);return c>255&&(c-=c-255),"#"+"".concat(Number(r<0||isNaN(r))?0:(r>255?255:r).toString(16)).padStart(2,"0")+"".concat(Number(n<0||isNaN(n))?0:(n>255?255:n).toString(16)).padStart(2,"0")+"".concat(Number(c<0||isNaN(c))?0:(c>255?255:c).toString(16)).padStart(2,"0")},r={setTheme:function(r){var n=r.colors,c=r.images,u=n.backgroundColor,l=n.primaryButton,a=n.secondaryButton,s=n.linkButton;if(u&&(document.documentElement.style.setProperty("--background-color",u),document.documentElement.style.setProperty("--background-text-color",e(u))),l){document.documentElement.style.setProperty("--primary-button-color",l),document.documentElement.style.setProperty("--primary-button-text-color",e(l)),document.documentElement.style.setProperty("--dark-button-color","".concat(l,"66")),document.documentElement.style.setProperty("--dark-button-text-color",e(l));for(var m=t(l),d=0;d<5;d+=1){var y=o(l,35*d*(m?1:-1));document.documentElement.style.setProperty("--primary-button-color-".concat(d,"00"),y)}}a&&(document.documentElement.style.setProperty("--secondary-button-color",a),document.documentElement.style.setProperty("--secondary-button-text-color",e(a))),s&&document.documentElement.style.setProperty("--link-button-color",s);var p=c.darkLogoUrl,b=c.whiteLogoUrl,i=c.iconUrl;if(p&&document.documentElement.style.setProperty("--dark-logo-url","url(".concat(p,")")),b&&document.documentElement.style.setProperty("--white-logo-url","url(".concat(b,")")),i&&document.documentElement.style.setProperty("--icon-url","url(".concat(i,")")),u&&p&&b){var g=t(u);document.documentElement.style.setProperty("--background-logo-url","".concat("url(".concat(g?b:p,")")))}}};export{r as default};
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@gyramais/gyra-design",
+  "version": "0.1.0",
+  "description": "Gyramais Design System",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "npm run test",
+    "build": "node --max-old-space-size=8192 node_modules/rollup/dist/bin/rollup -c rollup.config.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gyramais/gyra-design.git"
+  },
+  "author": "Gyramais Development Team <Ninjas>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/gyramais/gyra-design/issues"
+  },
+  "homepage": "https://github.com/gyramais/gyra-design#readme",
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^18.2.33",
+    "@types/react-collapse": "^5.0.4",
+    "@types/react-text-mask": "^5.4.14",
+    "class-variance-authority": "^0.7.0",
+    "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
+    "dayjs": "^1.11.10",
+    "lucide-react": "^0.292.0",
+    "react": "18.2.0",
+    "react-collapse": "^5.1.1",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "react-modern-drawer": "^1.2.2",
+    "react-text-mask": "^5.5.0",
+    "react-toastify": "^9.1.3",
+    "recharts": "^2.10.1",
+    "rollup": "^4.2.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "storybook": "^7.5.2",
+    "tailwindcss": "^3.3.5"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/rollup.config.js

@@ -0,0 +1,104 @@
+const peerDepsExternal = require("rollup-plugin-peer-deps-external");
+const resolve = require("@rollup/plugin-node-resolve");
+const commonjs = require("@rollup/plugin-commonjs");
+const typescript = require("@rollup/plugin-typescript");
+const postcss = require("rollup-plugin-postcss");
+const dts = require("rollup-plugin-dts");
+const terser = require('@rollup/plugin-terser');
+
+const packageJson = require("./package.json");
+const { getFolders } = require('./scripts/build-utils');
+
+const warnWithReturn = (warning, warn) => {
+  if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+    return;
+  }
+  if (/recharts/.test(warning.message)) {
+    return;
+  }
+  if (/d3-interpolate/.test(warning.message)) {
+    return;
+  }
+
+  warn(warning)
+}
+
+const componentsBundleConfig = (process.env.npm_config_component ? [process.env.npm_config_component] : getFolders('./src/components'))
+  .map((component) => ({
+    input: `src/components/${component}/index.ts`,
+    output: [
+      // {
+      //   file: `dist/components/${component}/index.js`,
+      //   format: "cjs",
+      //   sourcemap: true,
+      //   exports: "named",
+      //   banner: `'use client';`,
+      // },
+      {
+        file: `dist/components/${component}/index.js`,
+        format: "esm",
+        sourcemap: true,
+        exports: "named",
+        banner: `'use client';`,
+      }
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({
+        declaration: false,
+        declarationDir: undefined,
+      }),
+      postcss({ inject: false }),
+      terser({
+        compress: { directives: false },
+      }),
+    ],
+    external: ["react", "react-dom"],
+    onwarn: warnWithReturn,
+  }));
+
+module.exports = [
+  {
+    input: "src/index.ts",
+    output: [
+      // {
+      //   file: packageJson.main,
+      //   format: "cjs",
+      //   sourcemap: true,
+      //   exports: "named",
+      //   banner: `'use client';`,
+      // },
+      {
+        file: packageJson.main,
+        format: "esm",
+        sourcemap: true,
+        exports: "named",
+        banner: `'use client';`,
+      }
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript(),
+      postcss({
+        extensions: [".css"],
+        extract: 'index.css',
+      }),
+      terser({
+        compress: { directives: false },
+      }),
+    ],
+    external: ["react", "react-dom"],
+    onwarn: warnWithReturn,
+  },
+  {
+    input: "dist/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "es" }],
+    plugins: [dts.default()],
+    external: [/\.css$/]
+  },
+  ...componentsBundleConfig,
+];

package/scripts/build-utils.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+
+const excludedPaths = [
+  'utils',
+  'Text',
+]
+
+const getFolders = (entry) => {
+   const dirs = fs.readdirSync(entry)
+   const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => !excludedPaths.includes(name))
+   return dirsWithoutIndex
+}
+
+module.exports = {
+  getFolders,
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from "./Avatar";
+
+
+const meta: Meta<typeof Avatar> = {
+  title: "Library/Components/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    size: 32,
+    children: (
+      'G'
+    ),
+  },
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type AvatarProps = {
+  id?: string;
+  className?: string;
+  size?: number;
+  children?: React.ReactNode;
+}
+
+const Avatar = ({
+  id,
+  className,
+  size = 32,
+  children,
+}: AvatarProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-avatar",
+        className,
+      )}
+      style={{
+        width: size,
+        height: size,
+        fontSize: size / 2,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Avatar };

package/src/components/Avatar/index.css

@@ -0,0 +1,9 @@
+.gyramais-avatar {
+  @apply
+    flex
+    items-center
+    justify-center
+    rounded-full
+    bg-[var(--primary-button-color)]
+    text-[var(--primary-button-text-color)];
+}

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from "./Avatar";

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, ButtonProps } from "./Button";
+
+import PersonIcon from '@mui/icons-material/Person';
+
+const meta: Meta<typeof Button> = {
+  title: "Library/Components/Button",
+  component: Button,
+  parameters: {
+    layout: 'padded',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+const baseArgs: ButtonProps = {
+  id: '',
+  className: '',
+  type: 'primary',
+  size: 'medium',
+  htmlType: 'button',
+  link: false,
+  block: false,
+  loading: false,
+  disabled: false,
+  onClick: () => alert('Clicou'),
+}
+
+export const Normal: Story = {
+  args: {
+    ...baseArgs,
+    type: 'primary',
+    children: (
+      'Botão primário'
+    ),
+  },
+}
+
+export const NormalWithIcon: Story = {
+  args: {
+    ...baseArgs,
+    type: 'primary',
+    icon: (
+      <PersonIcon />
+    ),
+    children: (
+      'Botão primário'
+    ),
+  },
+}
+
+export const Link: Story = {
+  args: {
+    ...baseArgs,
+    link: true,
+    children: (
+      'Botão link'
+    ),
+  }
+}
+
+export const Icon: Story = {
+  args: {
+    ...baseArgs,
+    icon: (<PersonIcon />)
+  }
+}
+
+export const Block: Story = {
+  args: {
+    ...baseArgs,
+    block: true,
+    children: (
+      'Botão bloqueado'
+    ),
+  }
+}
+
+export const Loading: Story = {
+  args: {
+    ...baseArgs,
+    loading: true,
+    children: (
+      'Botão carregando'
+    ),
+  }
+}
+
+export const Disabled: Story = {
+  args: {
+    ...baseArgs,
+    disabled: true,
+    children: (
+      'Botão desabilitado'
+    ),
+  }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Loading } from "../Loading";
+
+export type ButtonProps = {
+  id?: string;
+  className?: string;
+  type?: "primary" | "secondary" | "white" | "dark";
+  size?: "small" | "medium" | "large";
+  htmlType?: "button" | "submit";
+  link?: boolean;
+  block?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  children?: React.ReactNode;
+}
+
+
+const Button = ({
+  id,
+  className,
+  type = "primary",
+  size = "medium",
+  htmlType = "button",
+  link = false,
+  block = false,
+  disabled = false,
+  loading = false,
+  icon,
+  onClick,
+  children,
+}: ButtonProps) => {
+  return (
+    <button
+      id={id}
+      type={htmlType}
+      className={classNames(
+        "gyramais-button",
+        `gyramais-button-${size}`,
+        `gyramais-button-${type}`,
+        link ? 'gyramais-button-link' : '',
+        block ? 'gyramais-button-block' : '',
+        loading ? 'gyramais-button-loading' : '',
+        icon && !children ? 'gyramais-button-icon' : '',
+        className,
+      )}
+      onClick={!loading ? onClick : () => {}}
+      disabled={disabled}
+    >
+      {loading && (
+        <div className="gyramais-button-icon-container">
+          <Loading size={24} className="gyramais-button-loading-feedback" />
+        </div>
+      )}
+
+      {!loading && icon && (
+        <div className="gyramais-button-icon-container">
+          {icon}
+        </div>
+      )}
+
+      {children}
+    </button>
+  );
+};
+
+export { Button };