@crystallize/design-system 0.2.0 → 1.0.1

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,43 +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}
-    >
-      <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"
-      />
-    </svg>
-  );
-});
-
-Error.displayName = 'ErrorIcon';

package/src/icons/info.tsx

@@ -1,46 +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}
-    >
-      <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"
-      />
-    </svg>
-  );
-});
-
-Info.displayName = 'InfoIcon';

package/src/icons/warning.tsx

@@ -1,55 +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}
-    >
-      <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"
-      />
-    </svg>
-  );
-});
-
-Warning.displayName = 'WarningIcon';

package/src/text-field/TextField.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { TextField } from '.';
-
-const meta: Meta<typeof TextField> = {
-  title: 'Components/TextField',
-  component: TextField,
-  argTypes: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextField>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Luke Skywalker',
-    label: 'Name',
-  },
-};

package/src/text-field/index.ts

@@ -1 +0,0 @@
-export { TextField } from './text-field';

package/src/text-field/text-field.tsx

@@ -1,60 +0,0 @@
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
-import { cva, VariantProps } from 'class-variance-authority';
-
-import { Input } from '../input';
-
-type TextFieldStylesProps = VariantProps<typeof textFieldStyles>;
-const textFieldStyles = cva(
-  ['relative gap-3 flex flex-col p-3 text-sm font-medium text-gray-400 rounded border border-transparent border-solid'],
-  {
-    variants: {
-      variant: {
-        outlined: '',
-        filled: '',
-        standard: '',
-      },
-      raised: {
-        sm: 'shadow-sm',
-        md: 'shadow-md',
-        lg: 'shadow-lg',
-      },
-      paper: {
-        white: 'bg-white',
-        gray: 'bg-jupiter',
-      },
-      error: {
-        true: 'border-rose-800 text-rose-800',
-      },
-    },
-    defaultVariants: {
-      variant: 'standard',
-      paper: 'white',
-    },
-  },
-);
-
-export type TextFieldProps = Omit<TextFieldStylesProps, 'error'> & {
-  label: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  error?: string;
-} & ComponentPropsWithRef<'input'>;
-
-export type TextFieldRef = HTMLInputElement;
-
-export const TextField = forwardRef<TextFieldRef, TextFieldProps>(
-  ({ variant, raised, className, label, paper, endAdornment, error, ...delegated }, ref) => {
-    return (
-      <>
-        <label className={textFieldStyles({ variant, raised, paper, error: Boolean(error), className })}>
-          {label}
-          <Input ref={ref} className="w-10/12 text-ellipsis overflow-hidden" type="text" {...delegated} />
-          <div className="absolute right-1 top-2/3 -translate-y-1/2 ">{endAdornment}</div>
-        </label>
-        {error && <div className="text-rose-800 text-sm px-3 !mt-1">{error}</div>}
-      </>
-    );
-  },
-);
-
-TextField.displayName = 'TextField';