trepur_components 2.3.3 → 2.3.5

package/src/documentation/Colours.mdx

@@ -0,0 +1,192 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="colour/Palette" />
+
+<Unstyled>
+    <div className='px-4 theme-local grid grid-cols-1 gap-12'>
+      <div>
+        <h2 className='py-4'>Defaults</h2>
+        <div className='grid grid-cols-4 gap-6'>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-primary' />
+            <p>Primary</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-secondary' />
+            <p>Secondary</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-third' />
+            <p>Third</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-white' />
+            <p>White</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-black' />
+            <p>Black</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-grey' />
+            <p>Grey</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-light-grey' />
+            <p>Light Grey</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-lightest-grey' />
+            <p>Lightest Grey</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-border' />
+            <p>Border</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-border-light' />
+            <p>Border Light</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-border-lightest' />
+            <p>Border Lightest</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-border-dark' />
+            <p>Border Dark</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-primary-strict' />
+            <p>Primary Strict</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-red' />
+            <p>Red</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-gold' />
+            <p>Gold</p>
+          </div>
+
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-ink' />
+            <p>Ink</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2 className='py-4'>Feedback</h2>
+        <div className='grid grid-cols-4 gap-6'>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-success' />
+            <p>Success</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-error' />
+            <p>Error</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-warning' />
+            <p>Warning</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-info' />
+            <p>Info</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-success-light' />
+            <p>Success Light</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-error-light' />
+            <p>Error Light</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-warning-light' />
+            <p>Warning Light</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-info-light' />
+            <p>Info Light</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2 className='py-4'>Socials</h2>
+        <div className='grid grid-cols-4 gap-6'>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-facebook' />
+            <p>Facebook</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-linkedin' />
+            <p>Linkedin</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-email' />
+            <p>Email</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-github' />
+            <p>Github</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-whatsapp' />
+            <p>Whatsapp</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-twitter' />
+            <p>Twitter</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-instagram' />
+            <p>Instagram</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2 className='py-4'>Interactive Socials</h2>
+        <div className='grid grid-cols-4 gap-6'>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-facebook' />
+            <p>Interactive Facebook</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-linkedin' />
+            <p>Interactive Linkedin</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-email' />
+            <p>Interactive Email</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-github' />
+            <p>Interactive Github</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-whatsapp' />
+            <p>Interactive Whatsapp</p>
+          </div>
+          <div className='grid grid-cols-1 gap-1'>
+            <div className='h-6 rounded-md bg-interactive-twitter' />
+            <p>Interactive Twitter</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+</Unstyled>

package/src/documentation/Introduction.mdx

@@ -0,0 +1,9 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="guides/Introduction" />
+
+<img src="trepur-components-logo.png" width="200" />
+
+# Trepur Components
+
+Welcome to Trepur Components, the design system for Trepur Tech

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles/base.css

@@ -0,0 +1,117 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css');
+
+@tailwind base;
+@tailwind components;
+
+
+.theme-local {
+  --color-primary: #0036a0;
+  --color-secondary: #e2e2e2;
+  --color-tertiary: #921457;
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-error-light: #ffd9d9;
+  --color-success-light: #e7f5e7;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-error: #b11013;
+  --color-warning: #ffd35c;
+  --color-success: #69c364;
+  --color-info-light: #d8eaf5;
+  --color-linkedin: #0e76a8;
+}
+
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+.slick-track {
+  display: flex !important;
+}
+
+.slick-slide {
+  height: inherit !important;
+}
+
+.slick-slide > div {
+  height: 100%;
+  display: flex;
+}

package/src/utils/controls.ts

@@ -0,0 +1,44 @@
+export type Colours =
+  | 'primary'
+  | 'secondary'
+  | 'white'
+  | 'black'
+  | 'grey'
+  | 'gold'
+  | 'facebook'
+  | 'linkedin'
+  | 'email'
+  | 'instagram'
+  | 'github'
+  | 'interactive-facebook'
+  | 'interactive-email'
+  | 'interactive-linkedin'
+  | 'interactive-instagram'
+  | 'interactive-github'
+  | 'success'
+  | 'error'
+  | 'ink'
+  | 'transparent';
+
+export type SocialTypes = 'facebook' | 'instagram' | 'github' | 'linkedin';
+
+export const idAndClassName = {
+  id: {
+    description: 'Defines the id of the component',
+    control: { type: 'text', default: false },
+    table: {
+      category: 'Id',
+      type: { summary: 'string' },
+      defaultValue: { summary: 'undefined' },
+    },
+  },
+  className: {
+    description: 'Defines any additional classes for the component',
+    control: { type: 'text', default: false },
+    table: {
+      category: 'ClassName',
+      type: { summary: 'string' },
+      defaultValue: { summary: 'undefined' },
+    },
+  },
+};

package/src/utils/matchMedia.ts

@@ -0,0 +1,9 @@
+const MatchMedia = (query: string): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  const response = window.matchMedia(query);
+
+  return response?.matches;
+};
+
+export default MatchMedia;

package/src/utils/screens.ts

@@ -0,0 +1,7 @@
+export const Screens = {
+  xs: '320px',
+  sm: '500px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+};

package/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/tailwind.config.ts

@@ -0,0 +1,81 @@
+module.exports = {
+  content: ['./src/**/*.{js,tsx,jsx,ts,mdx}'],
+  theme: {
+    screens: {
+      sm: '550px',
+      md: '744px',
+      lg: '950px',
+      xl: '1128px',
+      '2xl': '1640px',
+      '3xl': '1880px',
+    },
+    fontFamily: {
+      sans: ['Sora', 'sans-serif'],
+    },
+    fontWeight: {
+      thin: '100',
+      extraLight: '200',
+      light: '300',
+      regular: '400',
+      medium: '500',
+      semiBold: '600',
+      bold: '700',
+      extraBold: '800',
+    },
+    fontSize: {
+      xxs: '8px',
+      xs: '12px',
+      sm: '16px',
+      md: '22px',
+      lg: '28px',
+      xl: '36px',
+      xxl: '48px',
+    },
+    colors: {
+      primary: 'var(--color-primary)',
+      secondary: 'var(--color-secondary)',
+      tertiary: 'var(--color-tertiary)',
+      ink: 'var(--color-ink)',
+      third: 'var(--color-third)',
+      transparent: 'var(--color-transparent)',
+      white: 'var(--color-white)',
+      black: 'var(--color-black)',
+      red: 'var(--color-red)',
+      grey: 'var(--color-grey)',
+      'light-grey': 'var(--color-light-grey)',
+      'lightest-grey': 'var(--color-lightest-grey)',
+      'primary-strict': 'var(--color-primary-strict)',
+      border: 'var(--color-border)',
+      'border-lightest': 'var(--color-border-lightest)',
+      'border-light': 'var(--color-border-light)',
+      'border-dark': 'var(--color-border-dark)',
+      'error-light': 'var(--color-error-light)',
+      'success-light': 'var(--color-success-light)',
+      facebook: 'var(--color-facebook)',
+      whatsapp: 'var(--color-whatsapp)',
+      twitter: 'var(--color-twitter)',
+      email: 'var(--color-email)',
+      github: 'var(--color-github)',
+      linkedin: 'var(--color-linkedin)',
+      instagram: 'var(--color-instagram)',
+      'interactive-facebook': 'var(--color-interactive-facebook)',
+      'interactive-whatsapp': 'var(--color-interactive-whatsapp)',
+      'interactive-twitter': 'var(--color-interactive-twitter)',
+      'interactive-linkedin': 'var(--color-interactive-linkedin)',
+      'interactive-instagram': 'var(--color-interactive-instagram)',
+      'interactive-email': 'var(--color-interactive-email)',
+      'interactive-github': 'var(--color-interactive-github)',
+      gold: 'var(--color-gold)',
+      error: 'var(--color-error)',
+      warning: 'var(--color-warning)',
+      success: 'var(--color-success)',
+      'info-light': 'var(--color-info-light)',
+    },
+    extend: {
+      scale: {
+        110: '1.1',
+      },
+    },
+  },
+  themes: [],
+};

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDirs": ["src", ".storybook/docs"],
+    "declaration": true,
+    "declarationDir": "lib",
+    "module": "esnext",
+    "target": "esnext",
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "lib": ["dom", "ES2022"],
+    "paths": {
+      "@assets/*": ["./src/assets/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@components/*": ["src/components/*"]
+    },
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["react", "vite-plugin-svgr/client"],
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src",
+    ".storybook/storybookDecorators.tsx",
+    ".storybook/docs",
+    "tailwind.config.ts",
+    "tailwind"
+, "archive/Video", "archive/BreadcrumbsItem", "archive/BreadcrumbsBordered", "archive/Breadcrumbs", "archive/typography", "archive/theme.ts"  ],
+  "files": ["svg.d.ts"],
+  "exclude": ["node_modules", "lib"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": ["vite.config.mjs", "package.json"],
+  "exclude": ["dist"]
+}

package/vite.config.mjs

@@ -0,0 +1,64 @@
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
+import tsConfigPaths from 'vite-tsconfig-paths';
+
+import { dependencies, devDependencies } from './package.json';
+
+export default defineConfig(() => ({
+  plugins: [
+    react({}),
+    tsConfigPaths(),
+    dts({
+      include: ['src'],
+    }),
+    [
+      viteStaticCopy({
+        targets: [
+          { src: 'tailwind', dest: './' },
+          { src: 'src/styles', dest: './' },
+          { src: 'src/assets', dest: './' },
+        ],
+      }),
+    ],
+    svgr(),
+  ],
+  build: {
+    lib: {
+      entry: {
+        index: resolve('src', 'index.ts'),
+      },
+      formats: ['es'],
+    },
+    esbuild: {
+      minifyIdentifiers: false,
+    },
+    outDir: 'lib',
+    rollupOptions: {
+      output: {
+        // https://github.com/vitejs/vite/issues/5174#issuecomment-1536546402
+        format: 'esm',
+        preserveEntrySignatures: 'strict',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: ({ name: fileName }) => {
+          return `${fileName}.js`;
+        },
+      },
+      external: [
+        ...Object.keys(devDependencies),
+        ...Object.keys(dependencies),
+        'react/jsx-runtime',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  dedupe: ['react', 'react-dom'],
+}));

package/lib/archive/Breadcrumbs/index.js

@@ -1,12 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import d from "classnames";
-const o = ({ id: l, className: m, links: a }) => {
-  const r = a != null ? Object.keys(a).length : 0, h = d(m, "flex py-2", "theme-local");
-  return /* @__PURE__ */ e("ul", { id: l, className: h, children: a == null ? void 0 : a.map((c, s) => /* @__PURE__ */ t("div", { className: "flex", children: [
-    /* @__PURE__ */ e("li", { className: "h-8", children: s + 1 >= r ? /* @__PURE__ */ e("p", { className: "px-1 py-1", children: c.name }) : /* @__PURE__ */ e("p", { className: "px-1 py-1", children: /* @__PURE__ */ e("a", { className: "text-facebook hover:underline", href: c.href, children: c.name }) }) }),
-    s + 1 < r && /* @__PURE__ */ e("li", { className: "h-8", children: /* @__PURE__ */ e("p", { className: "py-1", children: "  >  " }) })
-  ] }, `breadcrumb_${s + 1}`)) });
-};
-export {
-  o as default
-};

package/lib/archive/BreadcrumbsBordered/index.js

@@ -1,25 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import p from "classnames";
-import "react";
-import u from "../BreadcrumbsItem/index.js";
-const x = ({ id: c, className: s, links: e }) => {
-  const t = (e == null ? void 0 : e.length) !== void 0 ? e.length : 0, d = p(s, "flex theme-local");
-  return /* @__PURE__ */ o("ul", { id: c, className: d, children: e == null ? void 0 : e.map((m, r) => {
-    const f = r === 0 ? "mr-3" : "mx-3", n = r === 0;
-    let a = "standard";
-    return t >= 1 && r + 1 < t && (a = "link"), /* @__PURE__ */ o(
-      u,
-      {
-        className: f,
-        name: m.name,
-        link: m.link,
-        type: a,
-        firstItem: n
-      },
-      `breadcrumb_item_${r + 0}`
-    );
-  }) });
-};
-export {
-  x as default
-};