@kalink-ui/seedly 0.1.2 → 0.2.0

package/.storybook/main.mts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,27 @@
+import './theme/ref.css';
+import './theme/theme.css';
+
+import { type Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    docs: { controls: { sort: 'requiredFirst' } },
+
+    tags: ['autodocs'],
+
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    options: {
+      storySort: {
+        order: ['Styles', 'Layout', 'Components'],
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/theme/ref.css.ts

@@ -0,0 +1,63 @@
+import {
+  createGlobalTheme,
+  createVar,
+  globalStyle,
+} from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+
+const sysFluidityMin = createVar();
+const sysFluidityMax = createVar();
+const sysFluidityInterpolation = createVar();
+
+globalStyle(':root', {
+  vars: {
+    [sysFluidityMin]: '23.5',
+    [sysFluidityMax]: '80',
+    [sysFluidityInterpolation]: calc.divide(
+      calc.subtract('100vw', calc.multiply(sysFluidityMin, '1rem')),
+      calc.subtract(sysFluidityMax, sysFluidityMin),
+    ),
+  },
+});
+
+export const refs = createGlobalTheme(':root', {
+  colors: {
+    neutral: {
+      0: '#000000',
+      10: '#161C1D',
+      20: '#2C383A',
+      30: '#435456',
+      40: '#597173',
+      50: '#6F8D90',
+      60: '#8CA4A6',
+      70: '#A9BBBC',
+      80: '#C5D1D3',
+      90: '#E2E8E9',
+      100: '#FFFFFF',
+    },
+    primary: {
+      0: '#000000',
+      10: '#1A1110',
+      20: '#401D10',
+      30: '#7F3A1A',
+      40: '#BF5B21',
+      50: '#F27F1B',
+      60: '#F2A950',
+      70: '#E6BD8A',
+      80: '#E4CEBC',
+      90: '#ECE8E2',
+      100: '#FFFFFF',
+    },
+  },
+
+  fluidity: {
+    min: sysFluidityMin,
+    max: sysFluidityMax,
+    interpolation: sysFluidityInterpolation,
+  },
+
+  typeface: {
+    brand: 'Serif',
+    plain: 'Sans Serif',
+  },
+});

package/.storybook/theme/sprinkles.css.ts

@@ -0,0 +1,40 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+
+const space = {
+  none: '0',
+  small: '4px',
+  medium: '8px',
+  large: '16px',
+};
+
+export const sprinklesProps = {
+  padding: space,
+  backgroundColor: {
+    red: 'red',
+    blue: 'blue',
+  },
+  color: {
+    white: 'white',
+    black: 'black',
+  },
+  textAlign: {
+    center: 'center',
+    start: 'start',
+    end: 'end',
+  },
+} as const;
+
+export const responsiveProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { '@media': 'screen and (min-width: 768px)' },
+    desktop: { '@media': 'screen and (min-width: 1024px)' },
+  },
+  defaultCondition: 'mobile',
+  properties: sprinklesProps,
+});
+
+export const sprinkles = createSprinkles(responsiveProperties);
+export type Sprinkles = Parameters<typeof sprinkles>[0];
+
+export type SprinklesFnBase = ReturnType<typeof createSprinkles>;

package/.storybook/theme/theme.css.ts

@@ -0,0 +1,293 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+
+import { sys } from '../../src/styles/system-contract.css';
+
+import { refs } from './ref.css';
+
+createGlobalTheme(':root', sys, {
+  layout: {
+    measure: '75ch',
+    direction: '1',
+  },
+
+  color: {
+    background: refs.colors.neutral[90],
+    foreground: refs.colors.neutral[10],
+
+    outline: refs.colors.neutral[40],
+    muted: refs.colors.neutral[20],
+  },
+
+  state: {
+    hovered: {
+      opacity: '0.08',
+    },
+    focused: {
+      opacity: '0.12',
+    },
+    pressed: {
+      opacity: '0.2',
+    },
+  },
+
+  shape: {
+    corner: {
+      none: '0',
+      sharp: '0.125rem', // 2px
+      small: '0.25rem', // 4px
+      medium: '0.5rem', // 8px
+      rounded: '0.75rem', // 12px
+      circle: '50%',
+    },
+  },
+
+  elevation: {
+    none: 'none',
+    minimal:
+      '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    low: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+    moderate:
+      '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+    high: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+    peak: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
+  },
+
+  motion: {
+    duration: {
+      short: {
+        1: '50ms',
+        2: '100ms',
+        3: '150ms',
+        4: '200ms',
+      },
+      medium: {
+        1: '250ms',
+        2: '300ms',
+        3: '350ms',
+        4: '400ms',
+      },
+      long: {
+        1: '450ms',
+        2: '500ms',
+        3: '550ms',
+        4: '600ms',
+      },
+    },
+    easing: {
+      standard: 'cubic-bezier(0.2, 0, 0, 1)',
+      decelerate: {
+        standard: 'cubic-bezier(0.4, 0, 1, 1)',
+        emphasized: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+      },
+      accelerate: {
+        standard: 'cubic-bezier(0.4, 0, 1, 1)',
+        emphasized: 'cubic-bezier(0.3, 0, 0.8, 0.15)',
+      },
+    },
+  },
+
+  typography: {
+    display: {
+      /* Display Large from 40px to 85px */
+      large: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-display-large-size) * 0.1)`,
+        size: `clamp(2.5rem, calc(2.5rem + (5.3125 - 2.5) * ${refs.fluidity.interpolation}), 5.3125rem)`,
+      },
+
+      /* Display Medium from 34px to 65px */
+      medium: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-display-medium-size) * 0.1)`,
+        size: `clamp(2.125rem, calc(2.125rem + (4.0625 - 2.125) * ${refs.fluidity.interpolation}), 4.0625rem)`,
+      },
+
+      /* Display Small from 28px to 50px */
+      small: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-display-small-size) * 0.1)`,
+        size: `clamp(1.75rem, calc(1.75rem + (3.125 - 1.75) * ${refs.fluidity.interpolation}), 3.125rem)`,
+      },
+    },
+
+    headline: {
+      /* Heading Large from 32px to 68px */
+      large: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-heading-large-size) * 0.1)`,
+        size: `clamp(2rem, calc(2rem + (4.25 - 2) * ${refs.fluidity.interpolation}), 4.25rem)`,
+      },
+
+      /* Heading Medium from 28px to 54px */
+      medium: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-heading-medium-size) * 0.1)`,
+        size: `clamp(1.75rem, calc(1.75rem + (3.375 - 1.75) * ${refs.fluidity.interpolation}), 3.375rem)`,
+      },
+
+      /* Heading Small from 24px to 44px */
+      small: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-heading-small-size) * 0.1)`,
+        size: `clamp(1.5rem, calc(1.5rem + (2.75 - 1.5) * ${refs.fluidity.interpolation}), 2.75rem)`,
+      },
+    },
+
+    /* Title Large from 24px to 36px */
+    title: {
+      large: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-title-large-size) * 0.1)`,
+        size: `clamp(1.5rem, calc(1.5rem + (2.25 - 1.5) * ${refs.fluidity.interpolation}), 2.25rem)`,
+      },
+
+      /* Title Medium from 18px to 24px */
+      medium: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-title-medium-size) * 0.1)`,
+        size: `clamp(1.125rem, calc(1.125rem + (1.5 - 1.125) * ${refs.fluidity.interpolation}), 1.5rem)`,
+      },
+
+      /* Title Small from 17px to 21px */
+      small: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--sys-typography-title-small-size) * 0.1)`,
+        size: `clamp(1.0625rem, calc(1.0625rem + (1.3125 - 1.0625) * ${refs.fluidity.interpolation}), 1.3125rem)`,
+      },
+    },
+
+    body: {
+      /* Body Large from 19px to 25px */
+      large: {
+        font: 'var(--ref-typeface-plain)',
+        weight: 'var(--ref-typeface-weight-regular)',
+        lineHeight: 'var(--ref-line-height-lg)',
+        tracking: 'normal',
+        size: `clamp(1.1875rem, calc(1.1875rem + (1.5625 - 1.1875) * ${refs.fluidity.interpolation}), 1.5625rem)`,
+      },
+
+      /* Body Medium from 14px to 17px */
+      medium: {
+        font: 'var(--ref-typeface-plain)',
+        weight: 'var(--ref-typeface-weight-regular)',
+        lineHeight: 'var(--ref-line-height-xl)',
+        tracking: 'normal',
+        size: `clamp(0.875rem, calc(0.875rem + (1.0625 - 0.875) * ${refs.fluidity.interpolation}), 1.0625rem)`,
+      },
+
+      /* Body Small from 12px to 14px */
+      small: {
+        font: 'var(--ref-typeface-plain)',
+        weight: 'var(--ref-typeface-weight-regular)',
+        lineHeight: 'var(--ref-line-height-md)',
+        tracking: 'normal',
+        size: `clamp(0.75rem, calc(0.75rem + (0.875 - 0.75) * ${refs.fluidity.interpolation}), 0.875rem)`,
+      },
+    },
+
+    label: {
+      /* Label Large from 16px to 20px */
+      large: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--ref-font-size-sm) * 0.1)`,
+        size: `clamp(1rem, calc(1rem + (1.25 - 1) * ${refs.fluidity.interpolation}), 1.25rem)`,
+      },
+
+      /* Label Medium from 14px to 17px */
+      medium: {
+        font: 'var(--ref-typeface-plain)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-xl)',
+        tracking: 'normal',
+        size: `clamp(0.875rem, calc(0.875rem + (1.0625 - 0.875) * ${refs.fluidity.interpolation}), 1.0625rem)`,
+      },
+
+      /* Label Small from 12px to 14px */
+      small: {
+        font: 'var(--ref-typeface-brand)',
+        weight: 'var(--ref-typeface-weight-bold)',
+        lineHeight: 'var(--ref-line-height-sm)',
+        tracking: `calc(var(--ref-font-size-sm) * 0.1)`,
+        size: `clamp(0.75rem, calc(0.75rem + (0.875 - 0.75) * ${refs.fluidity.interpolation}), 0.875rem)`,
+      },
+    },
+  },
+
+  spacing: {
+    0: '0px',
+
+    /* from 4px to 6px */
+    1: `clamp(0.25rem, calc(0.25rem + (0.375 - 0.25) * ${refs.fluidity.interpolation}), 0.375rem)`,
+
+    /* from 8px to 13px */
+    2: `clamp(0.5rem, calc(0.5rem + (0.8125 - 0.5) * ${refs.fluidity.interpolation}), 0.8125rem)`,
+
+    /* from 12px to 21px */
+    3: `clamp(0.75rem, calc(0.75rem + (1.3125 - 0.75) * ${refs.fluidity.interpolation}), 1.3125rem)`,
+
+    /* from 16px to 29px */
+    4: `clamp(1rem, calc(1rem + (1.8125 - 1) * ${refs.fluidity.interpolation}), 1.8125rem)`,
+
+    /* from 20px to 38px */
+    5: `clamp(1.25rem, calc(1.25rem + (2.375 - 1.25) * ${refs.fluidity.interpolation}), 2.375rem)`,
+
+    /* from 24px to 47px */
+    6: `clamp(1.5rem, calc(1.5rem + (2.9375 - 1.5) * ${refs.fluidity.interpolation}), 2.9375rem)`,
+
+    /* from 28px to 57px */
+    7: `clamp(1.75rem, calc(1.75rem + (3.5625 - 1.75) * ${refs.fluidity.interpolation}), 3.5625rem)`,
+
+    /* from 32px to 66px */
+    8: `clamp(2rem, calc(2rem + (4.125 - 2) * ${refs.fluidity.interpolation}), 4.125rem)`,
+
+    /* from 36px to 76px */
+    9: `clamp(2.25rem, calc(2.25rem + (4.75 - 2.25) * ${refs.fluidity.interpolation}), 4.75rem)`,
+
+    /* from 40px to 87px */
+    10: `clamp(2.5rem, calc(2.5rem + (5.4375 - 2.5) * ${refs.fluidity.interpolation}), 5.4375rem)`,
+
+    /* from 44px to 97px */
+    11: `clamp(2.75rem, calc(2.75rem + (6.0625 - 2.75) * ${refs.fluidity.interpolation}), 6.0625rem)`,
+
+    /* from 48px to 108px */
+    12: `clamp(3rem, calc(3rem + (6.75 - 3) * ${refs.fluidity.interpolation}), 6.75rem)`,
+
+    /* from 52px to 119px */
+    13: `clamp(3.25rem, calc(3.25rem + (7.4375 - 3.25) * ${refs.fluidity.interpolation}), 7.4375rem)`,
+
+    /* from 56px to 130px */
+    14: `clamp(3.5rem, calc(3.5rem + (8.125 - 3.5) * ${refs.fluidity.interpolation}), 8.125rem)`,
+
+    /* from 60px to 141px */
+    15: `clamp(3.75rem, calc(3.75rem + (8.8125 - 3.75) * ${refs.fluidity.interpolation}), 8.8125rem)`,
+
+    /* from 64px to 153px */
+    16: `clamp(4rem, calc(4rem + (9.5625 - 4) * ${refs.fluidity.interpolation}), 9.5625rem)`,
+
+    /* from 68px to 164px */
+    17: `clamp(4.25rem, calc(4.25rem + (10.25 - 4.25) * ${refs.fluidity.interpolation}), 10.25rem)`,
+
+    /* from 72px to 176px */
+    18: `clamp(4.5rem, calc(4.5rem + (11 - 4.5) * ${refs.fluidity.interpolation}), 11rem)`,
+  },
+});

package/.turbo/turbo-lint.log

@@ -0,0 +1,82 @@
+
+
+> @kalink/ui@0.0.0 lint /Users/louis/dev/kalink-ui/packages/ui
+> eslint . --max-warnings 0
+
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/center/center.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./center.css`      import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/cluster/cluster.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./cluster.css`     import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/cover/cover.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./cover.css`       import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/frame/frame.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./frame.css`       import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/grid/grid.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./grid.css`        import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/sidebar/sidebar.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./sidebar.css`     import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/stack/stack.stories.tsx
+  1:1   error  `@storybook/react` type import should occur after import of `./stack.css`       import/order
+  3:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  4:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/components/switcher/switcher.stories.tsx
+  1:1   error  There should be at least one empty line between import groups                   import/order
+  1:1   error  `@storybook/react` type import should occur after import of `./switcher.css`    import/order
+  4:36  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-recipe'  import/no-unresolved
+  5:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'            import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/styles/seed/seed.stories.tsx
+  2:39  error  Unable to resolve path to module '@/storybook/arg-types/arg-types-from-sprinkles'  import/no-unresolved
+  3:40  error  Unable to resolve path to module '@/storybook/arg-types/common-args'               import/no-unresolved
+  7:8   error  Unable to resolve path to module '@/storybook/styles/sprinkles-mock.css'           import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/types/utils.types.ts
+  3:75  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Users/louis/dev/kalink-ui/packages/ui/src/utils/__tests__/extract-sprinkles-props.test.ts
+  1:32  error  Unable to resolve path to module '@std/testing/bdd'                    import/no-unresolved
+  2:21  error  Unable to resolve path to module '@std/testing/mock'                   import/no-unresolved
+  3:1   error  `@std/expect` import should occur before import of `@std/testing/bdd`  import/order
+  3:24  error  Unable to resolve path to module '@std/expect'                         import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/utils/__tests__/is-object.test.ts
+  1:1   error  There should be at least one empty line between import groups                   import/order
+  2:1   error  `@std/testing/bdd` import should occur before import of `@/utils/is-object.ts`  import/order
+  2:30  error  Unable to resolve path to module '@std/testing/bdd'                             import/no-unresolved
+  3:1   error  `@std/expect` import should occur before import of `@/utils/is-object.ts`       import/order
+  3:24  error  Unable to resolve path to module '@std/expect'                                  import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/utils/__tests__/map-contract-vars.test.ts
+  1:1   error  There should be at least one empty line between import groups                           import/order
+  2:1   error  `@std/testing/bdd` import should occur before import of `@/utils/map-contract-vars.ts`  import/order
+  2:32  error  Unable to resolve path to module '@std/testing/bdd'                                     import/no-unresolved
+  3:1   error  `@std/expect` import should occur before import of `@/utils/map-contract-vars.ts`       import/order
+  3:24  error  Unable to resolve path to module '@std/expect'                                          import/no-unresolved
+
+/Users/louis/dev/kalink-ui/packages/ui/src/utils/extract-sprinkles-props.ts
+  5:13  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+✖ 44 problems (44 errors, 0 warnings)
+  16 errors and 0 warnings potentially fixable with the `--fix` option.
+
+ ELIFECYCLE  Command failed with exit code 1.