@crystallize/design-system 0.0.2 → 1.0.0

package/src/spinner/Spinner.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Spinner } from '.';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      defaultValue: 30,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/spinner/index.tsx

@@ -0,0 +1,48 @@
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+
+import './spinner.css';
+
+const realSize = 40;
+
+type SpinnerProps = ComponentPropsWithRef<'div'> & {
+  children?: ReactNode;
+  className?: string;
+  color?: string;
+  size?: number;
+  strokeSize?: number;
+};
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ children, className, color = 'currentColor', size = 30, strokeSize, ...delegated }, ref) => {
+    const viewSize = size || realSize;
+    const sizeHalf = realSize / 2;
+
+    return (
+      <div ref={ref} className={cx('c-spinner', className)} data-testid="loading-spinner" {...delegated}>
+        <svg viewBox={`0 0 ${realSize} ${realSize}`} x="0px" y="0px" style={{ width: viewSize, height: viewSize }}>
+          <circle
+            cx="20"
+            cy="20"
+            r="18"
+            style={{
+              stroke: color,
+              strokeWidth: strokeSize ? strokeSize : viewSize / 10,
+              strokeLinecap: 'round',
+              strokeDasharray: size < 16 ? size * 6 : size * 3.5,
+              transformOrigin: `${sizeHalf}px ${sizeHalf}px 0`,
+            }}
+            className="c-spinner-artifact"
+          />
+        </svg>
+        {children && (
+          <span className="c-spinner-children" style={{ fontSize: size ? `${size * 0.75}px` : '1em' }}>
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';

package/src/spinner/spinner.css

@@ -0,0 +1,11 @@
+.c-spinner {
+  @apply inline-flex items-center;
+
+  &-artifact {
+    @apply animate-spin fill-transparent;
+  }
+
+  &-children {
+    @apply ml-[15px] inline-block;
+  }
+}

package/tailwind.config.cjs

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colorsPlugin = require('./plugins/colors');
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ['./src/**/*.tsx'],
+  safelist: ['c-dark'],
+  experimental: {
+    optimizeUniversalDefaults: true,
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        serif: ["'Roboto Slab'", ...defaultTheme.fontFamily.serif],
+      },
+      colors: {
+        // Some nice-to-have colors
+        transparent: 'transparent',
+        inherit: 'inherit',
+      },
+      keyframes: {
+        spin: {
+          '0%': {
+            transform: 'rotate(0deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+          '50%': {
+            transform: 'rotate(720deg)',
+            strokeDashoffset: 125.6, // 40 * 3.14
+          },
+          '100%': {
+            transform: 'rotate(1080deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+        },
+      },
+      animation: {
+        spin: 'spin 2s linear infinite',
+      },
+      boxShadow: {
+        DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
+      },
+    },
+  },
+  plugins: [colorsPlugin],
+};

package/src/button copy/ButtonCopy.stories.tsx

@@ -1,86 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Button } from '.';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/ButtonCopy',
-  component: Button,
-  argTypes: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-const variants = ['contained', 'outline', 'link', 'text'] as const;
-const intent = ['default', 'primary', 'success', 'danger'] as const;
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-export const AllButton: Story = {
-  name: 'All Buttons',
-  render: () => {
-    return (
-      <div className="grid grid-cols-4 gap-6 justify-items-center">
-        {sizes.map(size =>
-          variants.map(variant =>
-            intent.map(intent => (
-              <Button variant={variant} size={size} intent={intent}>
-                Click me
-              </Button>
-            )),
-          ),
-        )}
-      </div>
-    );
-  },
-};
-
-export const Contained: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    children: 'Button',
-  },
-};
-
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    children: 'Button',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-    children: 'Button',
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'primary',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'success',
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: 'contained',
-    children: 'Button',
-    intent: 'danger',
-  },
-};

package/src/button copy/button.tsx

@@ -1,61 +0,0 @@
-import { ComponentPropsWithRef, forwardRef } from 'react';
-import { cva, VariantProps } from 'class-variance-authority';
-
-type ButtonStylesProps = VariantProps<typeof buttonStyles>;
-const buttonStyles = cva(
-  [
-    'inline-grid grid-flow-col items-center gap-2 rounded font-medium cursor-pointer whitespace-nowrap',
-    'disabled:cursor-default disabled:scale-100 disabled:shadow-none',
-    'active:scale-95',
-    'focus:shadow',
-    'hover:shadow',
-    'focus-visible:outline-inherit focus-visible:outline-offset-1 focus-visible:outline focus-visible:outline-1',
-  ],
-  {
-    variants: {
-      variant: {
-        contained: 'bg-cosmos',
-        outline: 'bg-transparent border border-galaxy border-solid text-galaxy',
-        link: [
-          'text-sky-700',
-          'hover:shadow-none hover:text-sky-500',
-          'focus:shadow-none focus:text-sky-500',
-          'active:scale-100',
-        ],
-        text: ['hover:shadow-none hover:bg-cosmos', 'focus:shadow-none focus:bg-cosmos'],
-      },
-      intent: {
-        default: '',
-        primary: ['bg-cyan-200 text-cyan-800', 'hover:bg-cyan-300', 'focus:bg-cyan-300'],
-        success: ['bg-emerald-200 text-emerald-800', 'hover:bg-emerald-300', 'focus:bg-emerald-300'],
-        danger: ['bg-red-200 text-red-800', 'hover:bg-red-300', 'focus:bg-red-300'],
-      },
-      size: {
-        xs: 'h-8 px-5',
-        sm: 'h-9 px-6',
-        md: 'h-10 px-7',
-        lg: 'h-10 px-8',
-        xl: 'h-11 px-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'contained',
-      intent: 'default',
-      size: 'sm',
-    },
-  },
-);
-
-export type ButtonProps = ComponentPropsWithRef<'button'> & ButtonStylesProps;
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className, type = 'button', size, variant, intent, ...delegated }, ref) => {
-    return (
-      <button ref={ref} type={type} className={buttonStyles({ size, variant, intent, className })} {...delegated}>
-        {children}
-      </button>
-    );
-  },
-);
-
-Button.displayName = 'Button';

package/src/button copy/index.ts

@@ -1,3 +0,0 @@
-export { Button } from './button';
-
-export type { ButtonProps } from './button';

package/src/colors/Colors.stories.mdx

@@ -1,33 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
-
-<Meta title="Colors" />
-
-# Colors
-
-<ColorPalette>
-  <ColorItem
-    title="color.density"
-    subtitle="Lorem ispum"
-    colors={{ Density: '#4d525b'}}
-  />
-  <ColorItem
-    title="color.label"
-    subtitle="Lorem ispum"
-    colors={{ Label: '#9095a8'}}
-  />
-  <ColorItem
-    title="color.neptune"
-    subtitle="Lorem ispum"
-    colors={{ Neptune: '#bff6f8'}}
-  />
-  <ColorItem
-    title="color.jupiter"
-    subtitle="Lorem ispum"
-    colors={{ Jupiter: '#eeeff1'}}
-  />
-  <ColorItem
-    title="color.gray"
-    subtitle="Shades of gray"
-    colors={{ 'gray-1': '#333333', 'gray-2': '#4f4f4f', 'gray-3': '#828282', 'gray-4': '#bdbdbd', 'gray-5': '#e0e0e0', 'gray-6': '#f2f2f2' }}
-  />
-</ColorPalette>

package/src/icons/Iconography.stories.mdx

@@ -1,45 +0,0 @@
-import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
-
-import { Icon as IconExample } from '.';
-
-<Meta title="Iconography" />
-
-# Iconography
-
-<IconGallery>
-  <IconItem name="Arrow"  >
-    <IconExample.Arrow />
-  </IconItem>
-
-  <IconItem name="Cancel"  >
-    <IconExample.Cancel />
-  </IconItem>
-
-  <IconItem name="Dots">
-    <IconExample.Dots />
-  </IconItem>
-
-  <IconItem name="Glasses"  >
-    <IconExample.Glasses />
-  </IconItem>
-
-  <IconItem name="GraphQL"  >
-    <IconExample.GraphQL />
-  </IconItem>
-
-  <IconItem name="NailPolish"  >
-    <IconExample.NailPolish />
-  </IconItem>
-
-  <IconItem name="Error"  >
-    <IconExample.Error />
-  </IconItem>
-
-  <IconItem name="Info"  >
-    <IconExample.Info />
-  </IconItem>
-
-  <IconItem name="Warning"  >
-    <IconExample.Warning />
-  </IconItem>
-</IconGallery>

package/src/icons/dots.tsx

@@ -1,24 +0,0 @@
-import { forwardRef, SVGProps } from 'react';
-
-type DotsProps = SVGProps<SVGSVGElement>;
-type DotsRef = SVGSVGElement;
-
-export const Dots = forwardRef<DotsRef, DotsProps>((delegated, ref) => {
-  return (
-    <svg
-      ref={ref}
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
-      <circle cx="10" cy="5" r="1.7857" fill="#9095A8" />
-      <circle cx="10" cy="10" r="1.7857" fill="#9095A8" />
-      <circle cx="10" cy="15" r="1.7857" fill="#9095A8" />
-    </svg>
-  );
-});
-
-Dots.displayName = 'DotsIcon';

package/src/icons/error.tsx

@@ -1,50 +0,0 @@
-import { forwardRef, SVGProps } from 'react';
-
-type ErrorProps = SVGProps<SVGSVGElement>;
-type ErrorRef = SVGSVGElement;
-
-export const Error = forwardRef<ErrorRef, ErrorProps>((delegated, ref) => {
-  return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      fill="none"
-      viewBox="0 0 22 22"
-      {...delegated}
-    >
-      <g clipPath="url(#a)">
-        <path
-          fill="#DD1367"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          fillRule="evenodd"
-          d="m7.364 13.479 1.157 1.157L11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157-2.48 2.478-2.478-2.478L7.364 8.52 9.842 11l-2.478 2.479Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M6.94 13.903a.6.6 0 0 1 0-.849L8.994 11 6.94 8.946a.6.6 0 0 1 0-.849L8.097 6.94a.6.6 0 0 1 .849 0L11 8.994l2.054-2.054a.6.6 0 0 1 .849 0l1.157 1.157a.6.6 0 0 1 0 .849L13.006 11l2.054 2.054a.6.6 0 0 1 0 .849l-1.157 1.157a.6.6 0 0 1-.849 0L11 13.006 8.946 15.06a.6.6 0 0 1-.849 0L6.94 13.903ZM11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157L11 9.842 8.521 7.364 7.364 8.52 9.842 11l-2.478 2.479 1.157 1.157L11 12.158Z"
-          clipRule="evenodd"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-});
-
-Error.displayName = 'ErrorIcon';

package/src/icons/info.tsx

@@ -1,53 +0,0 @@
-import { forwardRef, SVGProps } from 'react';
-
-type InfoProps = SVGProps<SVGSVGElement>;
-type InfoRef = SVGSVGElement;
-
-export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
-  return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      fill="none"
-      viewBox="0 0 22 22"
-      {...delegated}
-    >
-      <g clipPath="url(#a)">
-        <path
-          fill="#BFF6F8"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
-          clipRule="evenodd"
-        />
-        <path fill="#fff" d="M14.814 6.317a.991.991 0 1 1-1.983 0 .991.991 0 0 1 1.983 0Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M15.415 6.317a1.592 1.592 0 1 1-3.184 0 1.592 1.592 0 0 1 3.184 0Zm-1.592.991a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          d="m9.37 16.049 1.8.26-.22-.7-.78-.621.56-1.14 2.261-3.382-.34-1.381-1.92-1-1.261.14-.28.32 1.08.54.14.54-2.22 2.862-.821 2.36 2 1.202Z"
-        />
-        <path
-          fill="#528693"
-          d="M10.476 16.666a4.93 4.93 0 0 1-2.096-.599c-1.114-.605-1.482-1.63-.961-2.673a9.606 9.606 0 0 1 1.437-1.963l.067-.077c.252-.293.513-.595.742-.897.288-.38.538-.745.443-1.031-.056-.164-.215-.282-.485-.362a1.58 1.58 0 0 0-.247-.033l-.055-.004a.984.984 0 0 1-.481-.096c-.169-.132-.098-.51-.013-.676a.915.915 0 0 1 .701-.473c.139-.025.28-.037.42-.035.656.034 1.301.176 1.91.42 1.104.424 1.631 1.263 1.41 2.244a4.193 4.193 0 0 1-.908 1.714c-.128.161-.26.315-.392.471l-.07.083c-.282.32-.544.654-.788 1.003l-.144.206c-.161.209-.291.44-.385.687a.582.582 0 0 0 .32.743.91.91 0 0 0 .32.08c.175.021.356.044.428.21a.575.575 0 0 1-.035.477 1.144 1.144 0 0 1-1.138.581Zm-.877-8.193c.128.079.268.136.414.17.18.04.35.12.494.236.58.552.14 1.272-.318 1.903-.214.292-.47.58-.74.884l-.068.077c-.624.692-1.27 1.408-1.497 2.232a1.148 1.148 0 0 0 .163 1.06c.493.658 1.78.907 2.819.921l.035-.05-.025-.035a1.248 1.248 0 0 1-.865-.594 1.04 1.04 0 0 1 .006-.894 8.071 8.071 0 0 1 1.309-1.977l.127-.155c.171-.21.356-.437.525-.665.371-.501.844-1.245.664-1.915-.315-1.173-2.15-1.209-3.03-1.226h-.057l.044.028Z"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-});
-
-Info.displayName = 'InfoIcon';

package/src/icons/warning.tsx

@@ -1,62 +0,0 @@
-import { forwardRef, SVGProps } from 'react';
-
-type WarningProps = SVGProps<SVGSVGElement>;
-type WarningRef = SVGSVGElement;
-
-export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) => {
-  return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      fill="none"
-      viewBox="0 0 22 22"
-      {...delegated}
-    >
-      <g clipPath="url(#a)">
-        <path
-          fill="#FFDE99"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.43 11c0 5.76-4.67 10.43-10.43 10.43S.57 16.76.57 11 5.24.57 11 .57 21.43 5.24 21.43 11ZM11 20.83c5.43 0 9.83-4.4 9.83-9.83S16.43 1.17 11 1.17 1.17 5.57 1.17 11s4.4 9.83 9.83 9.83Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          d="M10.077 5.232c.41-.71 1.436-.71 1.846 0L17 14.025c.41.71-.103 1.599-.924 1.599H5.923c-.82 0-1.333-.889-.923-1.6l5.077-8.792Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="m16.48 14.325-5.077-8.793a.466.466 0 0 0-.806 0L5.52 14.325c-.18.31.045.699.403.699h10.153a.466.466 0 0 0 .404-.7Zm-4.557-9.093a1.066 1.066 0 0 0-1.846 0L5 14.025c-.41.71.103 1.599.923 1.599h10.153c.821 0 1.334-.889.924-1.6l-5.077-8.792Z"
-          clipRule="evenodd"
-        />
-        <path fill="#FFDE99" d="M10.588 8.628a.5.5 0 1 1 1 0v2.475a.5.5 0 0 1-1 0V8.628Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M12.188 8.628v2.475a1.1 1.1 0 0 1-2.2 0V8.628a1.1 1.1 0 1 1 2.2 0Zm-1.1-.5a.5.5 0 0 0-.5.5v2.475a.5.5 0 1 0 1 0V8.628a.5.5 0 0 0-.5-.5Z"
-          clipRule="evenodd"
-        />
-        <path fill="#FFDE99" d="M11.588 13.403a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M12.188 13.403a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Zm-1.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"
-          clipRule="evenodd"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-});
-
-Warning.displayName = 'WarningIcon';