trepur_components 2.3.6 → 2.3.8

package/tailwind/preset.ts

@@ -0,0 +1,88 @@
+/* eslint-disable sort-keys */
+import tailwindScrollbar from 'tailwind-scrollbar';
+import type { Config } from 'tailwindcss';
+import tailwindAnimate from 'tailwindcss-animate';
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+import boxShadow from './boxShadow';
+import colors from './colors';
+import container from './container';
+import spacing from './spacing';
+
+const presetConfig: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  plugins: [tailwindAnimate, tailwindScrollbar],
+  theme: {
+    container,
+    extend: {
+      animation: {
+        'rest-bounce': 'rest-bounce 2s linear infinite',
+      },
+      boxShadow,
+      colors,
+
+      fontFamily: {
+        noto: ['Noto Sans JP', 'DM Sans', ...defaultTheme.fontFamily.sans],
+        sans: ['DM Sans', 'Noto Sans JP', ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        xs: [
+          '0.75rem',
+          {
+            lineHeight: '1.1rem',
+          },
+        ],
+        xl: [
+          '1.25rem',
+          {
+            lineHeight: '1.875rem',
+          },
+        ],
+        '2xl': [
+          '1.5rem',
+          {
+            lineHeight: '2.25rem',
+          },
+        ],
+        '3xl': [
+          '1.875rem',
+          {
+            lineHeight: '2.75rem',
+          },
+        ],
+        '4xl': [
+          '2.25rem',
+          {
+            lineHeight: '3.25rem',
+          },
+        ],
+        '5xl': [
+          '3rem',
+          {
+            lineHeight: '4rem',
+          },
+        ],
+      },
+      keyframes: {
+        'rest-bounce': {
+          '0%': {
+            transform: 'translateY(0%)',
+          },
+          '20%': {
+            transform: 'translateY(-40%)',
+          },
+          '40%': {
+            transform: 'translateY(0%)',
+          },
+        },
+      },
+      spacing,
+      transitionDelay: {
+        600: '600ms',
+      },
+    },
+  },
+};
+
+export default presetConfig;

package/tailwind/spacing.ts

@@ -0,0 +1,14 @@
+/* eslint-disable sort-keys */
+export default {
+  '0.25': '0.0625rem' /* 1px */,
+  '0.75': '0.1875rem' /* 3px */,
+  '1.25': '0.3125rem' /* 5px */,
+  '4.5': '1.125rem' /* 18px */,
+  '5.5': '1.375rem' /* 22px */,
+  '6.5': '1.625rem' /* 26px */,
+  '7.5': '1.875rem' /* 30px */,
+  '8.5': '2.125rem' /* 34px */,
+  '9.5': '2.375rem' /* 38px */,
+  13: '3.25rem' /* 52px */,
+  'app-header-height': 'var(--app-header-height, 0)',
+};

package/tsconfig.json

@@ -31,8 +31,14 @@
     ".storybook/storybookDecorators.tsx",
     ".storybook/docs",
     "tailwind.config.ts",
-    "tailwind"
-, "archive/Video", "archive/BreadcrumbsItem", "archive/BreadcrumbsBordered", "archive/Breadcrumbs", "archive/typography", "archive/theme.ts"  ],
+    "tailwind",
+    "src/components/Video",
+    "archive/BreadcrumbsItem",
+    "archive/BreadcrumbsBordered",
+    "archive/Breadcrumbs",
+    "archive/typography",
+    "archive/theme.ts"
+  ],
   "files": ["svg.d.ts"],
   "exclude": ["node_modules", "lib"],
   "references": [

package/archive/Button/style.module.css

@@ -1,76 +0,0 @@
-.classList {
-  @apply transform border-2 text-sm duration-500;
-  @apply inline-block text-center;
-}
-
-.classList:focus {
-  @apply outline;
-}
-
-.loading {
-  @apply absolute left-2/4 top-1/4 -ml-2;
-}
-
-.social {
-  @apply px-1 py-1;
-}
-
-.icon {
-  @apply px-3;
-}
-
-.default {
-  @apply px-8;
-}
-
-.padding {
-  @apply py-3;
-}
-
-.primary {
-  @apply border-secondary bg-primary text-secondary outline-primary;
-}
-
-.primaryNotDisabled:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.primaryNotDisabled:focus:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.secondary {
-  @apply border-primary bg-secondary text-primary outline-secondary;
-}
-
-.secondaryNotDisabled:hover {
-  @apply border-secondary bg-primary text-secondary;
-}
-
-.secondaryNotDisabled:focus:hover {
-  @apply border-primary bg-primary text-secondary;
-}
-
-.tertiary {
-  @apply border-secondary bg-secondary text-secondary outline-tertiary;
-}
-
-.tertiaryNotDisabled:hover {
-  @apply border-tertiary bg-secondary text-tertiary;
-}
-
-.tertiaryNotDisabled:focus:hover {
-  @apply border-secondary bg-secondary text-tertiary;
-}
-
-.disabled {
-  @apply opacity-50;
-}
-
-.rounded {
-  @apply rounded-lg;
-}
-
-.notRounded {
-  @apply rounded-none;
-}

package/archive/Card/style.module.css

@@ -1,75 +0,0 @@
-.classList {
-  @apply flex flex-col;
-  @apply rounded-lg;
-  @apply shadow-xl;
-}
-
-a .classList:hover {
-  @apply cursor-pointer;
-}
-
-.classList:hover .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:hover .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus {
-  @apply border-2 border-primary;
-  border-radius: 10px;
-}
-
-.classList:focus .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.imageClassList {
-  @apply h-full w-full object-cover;
-  @apply h-64 overflow-hidden object-cover;
-  @apply rounded-t-lg;
-  height: 256px;
-}
-
-.contentWrapper {
-  @apply flex flex-col items-stretch justify-between;
-  height: calc(100% - 256px);
-}
-
-.movingContent {
-  @apply bg-white;
-  @apply mt-0 px-6 pt-6;
-  @apply rounded-b-lg;
-  @apply transition-all duration-300;
-}
-
-.staticContent {
-  @apply h-full p-6;
-  @apply transition-all duration-300;
-  @apply flex flex-col items-stretch justify-between;
-}
-
-.title {
-  @apply text-md font-regular;
-}
-
-.subtitle {
-  @apply text-sm font-regular text-ink;
-}
-
-.description {
-  @apply flex-1 pb-6 text-sm font-light;
-}
-
-.buttonClassList {
-  @apply w-full;
-}

package/archive/CardWithTopImage/style.module.css

@@ -1,11 +0,0 @@
-.cardClasses {
-  max-width: 500px;
-}
-
-.wrapperClassList {
-  @apply mx-auto max-w-max rounded-full bg-white p-4;
-}
-
-.contentClassList {
-  @apply -mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black;
-}

package/archive/Carousel/style.module.css

@@ -1,99 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.visibleArrows {
-  @apply flex justify-between;
-}
-
-.slideWrapper {
-  @apply w-full pb-12 pt-4;
-}
-
-.dotWrapper {
-  @apply my-2 flex justify-center;
-}
-
-.dotButtonClassList {
-  @apply border-transparent py-2;
-}
-
-.dotButtonClassList:focus {
-  @apply border border-2;
-}
-
-.dotIconClassList {
-  @apply mx-1;
-}
-
-.dotIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.arrowWrapper {
-  @apply my-auto;
-}
-
-.arrowIconClassList {
-  @apply mx-auto;
-}
-
-.arrowIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.primary {
-  @apply border-white;
-}
-
-.white {
-  @apply border-primary;
-}
-
-.grey {
-  @apply border-primary;
-}
-
-.gold {
-  @apply border-primary;
-}
-
-.facebook {
-  @apply border-white;
-}
-
-.linkedin {
-  @apply border-white;
-}
-
-.email {
-  @apply border-white;
-}
-
-.instagram {
-  @apply border-primary;
-}
-
-.github {
-  @apply border-white;
-}
-
-.interactive-facebook {
-  @apply border-primary;
-}
-
-.interactive-email {
-  @apply border-primary;
-}
-
-.interactive-linkedin {
-  @apply border-primary;
-}
-
-.interactive-instagram {
-  @apply border-primary;
-}
-
-.interactive-github {
-  @apply border-primary;
-}

package/archive/CarouselThumbnail/style.module.css

@@ -1,67 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.slideWrapper {
-  @apply h-96 w-full rounded-t-2xl pb-4;
-}
-
-.thumbnail {
-  @apply h-24 w-16 rounded-b-2xl;
-}
-
-.primary {
-  @apply border-white;
-}
-
-.white {
-  @apply border-primary;
-}
-
-.grey {
-  @apply border-primary;
-}
-
-.gold {
-  @apply border-primary;
-}
-
-.facebook {
-  @apply border-white;
-}
-
-.linkedin {
-  @apply border-white;
-}
-
-.email {
-  @apply border-white;
-}
-
-.instagram {
-  @apply border-primary;
-}
-
-.github {
-  @apply border-white;
-}
-
-.interactive-facebook {
-  @apply border-primary;
-}
-
-.interactive-email {
-  @apply border-primary;
-}
-
-.interactive-linkedin {
-  @apply border-primary;
-}
-
-.interactive-instagram {
-  @apply border-primary;
-}
-
-.interactive-github {
-  @apply border-primary;
-}

package/archive/Checkbox/style.module.css

@@ -1,15 +0,0 @@
-.label {
-  @apply flex  hover:cursor-pointer;
-}
-
-.span {
-  @apply my-auto px-2;
-}
-
-.checkbox {
-  @apply h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer;
-}
-
-.checked {
-  @apply bg-facebook;
-}

package/archive/Collapsible/style.module.css

@@ -1,47 +0,0 @@
-.classList {
-  @apply w-full border-b border-lightest-grey duration-300 hover:cursor-pointer;
-}
-
-.heading {
-  @apply flex h-24 px-4 sm:pr-8;
-}
-
-.image {
-  @apply my-auto flex-none rounded-2xl;
-}
-
-.textWrapper {
-  @apply mx-4 my-auto grid w-full;
-}
-
-.preText {
-  @apply truncate text-xxs text-light-grey md:text-xs;
-}
-
-.title {
-  @apply truncate text-sm md:text-md;
-}
-
-.subtitle {
-  @apply truncate text-xs md:text-sm;
-}
-
-.contentWrapperClassList {
-  @apply w-auto overflow-hidden px-4;
-}
-
-.expanded {
-  @apply mb-4 mt-2 max-h-max;
-}
-
-.collapsed {
-  @apply max-h-0;
-}
-
-.children {
-  @apply pb-2 pt-4;
-}
-
-.iconWrapper {
-  @apply my-auto flex-none;
-}

package/archive/Column/index.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  children?: any;
-}
-const Column: React.FC<Props> = ({
-  id,
-  className,
-  sm = 1,
-  md = 1,
-  lg = 1,
-  xl = 1,
-  children,
-}: Props): JSX.Element => {
-  const widthOptions = [
-    { 1: [style.size1] },
-    { 2: [style.size2] },
-    { 3: [style.size3] },
-    { 4: [style.size4] },
-    { 5: [style.size5] },
-    { 6: [style.size6] },
-    { 7: [style.size7] },
-    { 8: [style.size8] },
-    { 9: [style.size9] },
-    { 10: [style.size10] },
-    { 11: [style.size11] },
-    { 12: [style.size12] },
-  ];
-
-  const mdWidthOptions = [
-    { 1: [style.mdSize1] },
-    { 2: [style.mdSize2] },
-    { 3: [style.mdSize3] },
-    { 4: [style.mdSize4] },
-    { 5: [style.mdSize5] },
-    { 6: [style.mdSize6] },
-    { 7: [style.mdSize7] },
-    { 8: [style.mdSize8] },
-    { 9: [style.mdSize9] },
-    { 10: [style.mdSize10] },
-    { 11: [style.mdSize11] },
-    { 12: [style.mdSize12] },
-  ];
-
-  const lgWidthOptions = [
-    { 1: [style.lgSize1] },
-    { 2: [style.lgSize2] },
-    { 3: [style.lgSize3] },
-    { 4: [style.lgSize4] },
-    { 5: [style.lgSize5] },
-    { 6: [style.lgSize6] },
-    { 7: [style.lgSize7] },
-    { 8: [style.lgSize8] },
-    { 9: [style.lgSize9] },
-    { 10: [style.lgSize10] },
-    { 11: [style.lgSize11] },
-    { 12: [style.lgSize12] },
-  ];
-
-  const xlWidthOptions = [
-    { 1: [style.xlSize1] },
-    { 2: [style.xlSize2] },
-    { 3: [style.xlSize3] },
-    { 4: [style.xlSize4] },
-    { 5: [style.xlSize5] },
-    { 6: [style.xlSize6] },
-    { 7: [style.xlSize7] },
-    { 8: [style.xlSize8] },
-    { 9: [style.xlSize9] },
-    { 10: [style.xlSize10] },
-    { 11: [style.xlSize11] },
-    { 12: [style.xlSize12] },
-  ];
-
-  const calculateWidth = (screen: any, size: number): string => {
-    switch (screen) {
-      case 'sm':
-        return Object.values(widthOptions[size - 1]).toString();
-      case 'md':
-        return Object.values(mdWidthOptions[size - 1]).toString();
-      case 'lg':
-        return Object.values(lgWidthOptions[size - 1]).toString();
-      case 'xl':
-        return Object.values(xlWidthOptions[size - 1]).toString();
-      default:
-        return Object.values(widthOptions[size - 1]).toString();
-    }
-  };
-
-  const classList = classNames(
-    {
-      [calculateWidth('sm', sm)]: sm,
-      [calculateWidth('md', md)]: md,
-      [calculateWidth('lg', lg)]: lg,
-      [calculateWidth('xl', xl)]: xl,
-    },
-    className,
-    style.classList,
-    'theme-local',
-  );
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-};
-
-export default Column;