tycho-components 0.0.1

package/src/styles/main.scss

@@ -0,0 +1,57 @@
+@use '_variables.scss';
+
+html,
+body,
+#root {
+  min-height: 100%;
+  background-color: var(--color-background);
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.app-button {
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: var(--font-size-button);
+  padding: 0px var(--spacing-small);
+  color: var(--color-dark);
+  background-color: transparent;
+  border-radius: 0;
+  cursor: pointer;
+
+  &.action {
+    border: 1px solid var(--color-disabled);
+  }
+
+  &:hover,
+  &.selected {
+    color: var(--color-dark);
+    background-color: var(--color-button-hover);
+  }
+
+  &:disabled {
+    color: var(--opacity-black-32);
+    background-color: var(--opacity-black-08);
+    cursor: not-allowed;
+  }
+}
+
+.icon-button {
+  border: none;
+  background-color: transparent;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.avatar {
+  width: inherit;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  readonly VITE_APP_URL_API: string;
+  readonly VITE_APP_PUBLIC_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/stories/Configure.mdx

@@ -0,0 +1,171 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Component Library" />
+
+<div className="sb-container">
+  <div className="sb-section-title"># Component Library</div>
+</div>
+<div className="sb-container">
+  <div className="sb-section-title">
+    ## TODO: Ajustar texto e estilo dessa tela
+    <a href="/?path=/docs/components-button--docs">Link de acesso ao Button</a>
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .sb-chevron {
+    margin-left: 5px;
+  }
+
+  .sb-features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 32px 20px;
+  }
+
+  .sb-socials {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sb-socials p {
+    margin-bottom: 10px;
+  }
+
+  .sb-explore-image {
+    max-height: 32px;
+    align-self: flex-start;
+  }
+
+  .sb-addon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: #EEF3F8;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    background: #EEF3F8;
+    height: 180px;
+    margin-bottom: 48px;
+    overflow: hidden;
+  }
+
+  .sb-addon-text {
+    padding-left: 48px;
+    max-width: 240px;
+  }
+
+  .sb-addon-text h4 {
+    padding-top: 0px;
+  }
+
+  .sb-addon-img {
+    position: absolute;
+    left: 345px;
+    top: 0;
+    height: 100%;
+    width: 200%;
+    overflow: hidden;
+  }
+
+  .sb-addon-img img {
+    width: 650px;
+    transform: rotate(-15deg);
+    margin-left: 40px;
+    margin-top: -72px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+    backface-visibility: hidden;
+  }
+
+  @media screen and (max-width: 800px) {
+    .sb-addon-img {
+      left: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+
+    .sb-features-grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sb-socials {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sb-addon {
+      height: 280px;
+      align-items: flex-start;
+      padding-top: 32px;
+      overflow: hidden;
+    }
+
+    .sb-addon-text {
+      padding-left: 24px;
+    }
+
+    .sb-addon-img {
+      right: 0;
+      left: 0;
+      top: 130px;
+      bottom: 0;
+      overflow: hidden;
+      height: auto;
+      width: 124%;
+    }
+
+    .sb-addon-img img {
+      width: 1200px;
+      transform: rotate(-12deg);
+      margin-left: 0;
+      margin-top: 48px;
+      margin-bottom: -40px;
+      margin-left: -24px;
+    }
+  }
+  `}
+</style>

package/stories/StorybookUtils.tsx

@@ -0,0 +1,40 @@
+import { useArgs } from '@storybook/preview-api';
+import type { StoryFn } from '@storybook/react';
+
+const secondaryBackgroundColor = '#185ABD';
+
+const withDynamicDocsBackground = (Story: StoryFn) => {
+  const [{ color }] = useArgs();
+
+  const backgroundColor = color === 'white' ? '#185ABD' : '#FFFFFF';
+  const docsStoryElement = document.querySelector('.docs-story');
+  if (docsStoryElement) {
+    docsStoryElement.setAttribute(
+      'style',
+      `background-color: ${backgroundColor || 'defaultBackgroundColor'}`
+    );
+  }
+
+  return <Story />;
+};
+
+const withSecondaryDocsBackground = (Story: StoryFn) => {
+  const docsStoryElement = document.querySelector('.docs-story');
+  if (docsStoryElement) {
+    docsStoryElement.setAttribute(
+      'style',
+      `background-color: ${
+        secondaryBackgroundColor || 'defaultBackgroundColor'
+      }`
+    );
+  }
+
+  return <Story />;
+};
+
+const StorybookUtils = {
+  withDynamicDocsBackground,
+  withSecondaryDocsBackground,
+};
+
+export default StorybookUtils;

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+import pluginChecker from 'vite-plugin-checker';
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import path from 'path';
+import { loadEnv } from 'vite';
+
+const envDir = './environment';
+
+export default ({ mode }: { mode: any }) => {
+  const env = loadEnv(mode, envDir);
+
+  return defineConfig({
+    base: env.VITE_APP_PUBLIC_URL,
+    plugins: [react(), svgr(), pluginChecker({ typescript: true })],
+    envDir: envDir,
+    server: {
+      port: 3000,
+    },
+    resolve: {
+      alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: './src/setupTest.ts',
+      css: false,
+    },
+  });
+};