trepur_components 2.3.3 → 2.3.4

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,116 @@
+@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/storybook-build/assets/Accordion.stories-Cn994N1H.js

@@ -0,0 +1,103 @@
+var _a, _b, _c;
+import { j as jsxRuntimeExports } from "./jsx-runtime-D2-sc1j1.js";
+import { i as idAndClassName } from "./controls-DJSGrQKd.js";
+import { c as classNames } from "./index-CpyNLP69.js";
+import "./index-DM9bPmif.js";
+import "./_commonjsHelpers-LQfde5yM.js";
+const Accordion = ({
+  id,
+  className,
+  items
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, className: classNames(className, "theme-local"), children: items == null ? void 0 : items.map((item, i) => {
+    return (
+      // <Collapsible key={`collapsible_item_${i}`} {...item}>
+      //   {item.children}
+      // </Collapsible>
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
+    );
+  }) });
+};
+try {
+  Accordion.displayName = "Accordion";
+  Accordion.__docgenInfo = { "description": "", "displayName": "Accordion", "props": { "id": { "defaultValue": null, "description": "", "name": "id", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "", "name": "className", "required": false, "type": { "name": "string" } }, "items": { "defaultValue": null, "description": "", "name": "items", "required": true, "type": { "name": "any" } } } };
+} catch (__react_docgen_typescript_loader_error) {
+}
+const propItems = [{
+  preText: "This is some text",
+  title: "This is a title",
+  subtitle: "This is a subtitle",
+  imageProps: {
+    src: "https://picsum.photos/100/100"
+  },
+  children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu."
+  })
+}, {
+  preText: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus nihil, molestias amet sed, corrupti debitis odit doloribus perspiciatis est, quasi illum culpa iusto. Molestias, ducimus. Provident, quibusdam fuga. Voluptatem, saepe.",
+  title: "This is a title",
+  imageProps: {
+    src: "https://picsum.photos/101/100"
+  },
+  children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu."
+  })
+}, {
+  subtitle: "This is a subtitle",
+  imageProps: {
+    src: "https://picsum.photos/100/101"
+  },
+  children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu."
+  })
+}, {
+  imageProps: {
+    src: "https://picsum.photos/102/100"
+  },
+  children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu."
+  })
+}];
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  argTypes: {
+    ...idAndClassName,
+    items: {
+      description: "An array of collapsible props",
+      control: {
+        type: "array",
+        default: void 0
+      },
+      table: {
+        category: "Accordion",
+        type: {
+          summary: "array"
+        },
+        defaultValue: {
+          summary: "undefined"
+        }
+      }
+    }
+  },
+  args: {
+    items: propItems
+  }
+};
+const Default = {};
+Default.parameters = {
+  ...Default.parameters,
+  docs: {
+    ...(_a = Default.parameters) == null ? void 0 : _a.docs,
+    source: {
+      originalSource: "{}",
+      ...(_c = (_b = Default.parameters) == null ? void 0 : _b.docs) == null ? void 0 : _c.source
+    }
+  }
+};
+const __namedExportsOrder = ["Default"];
+export {
+  Default,
+  __namedExportsOrder,
+  meta as default
+};