@goodhood-web/ui 0.0.4 → 0.0.5

package/src/lib/ToggleInput/ToggleInput.module.scss

@@ -1,33 +0,0 @@
-.toggleInput {
-  display: flex;
-  align-items: center;
-  padding: getSpacing('sm') getSpacing('lg');
-  background-color: getSemanticColor('surface', 'surface');
-  gap: getSpacing('md');
-
-  color: getSemanticColor('surface', 'onSurfaceVariant');
-  cursor: pointer;
-  width: 100%;
-
-  svg {
-    flex-shrink: 0;
-  }
-
-  .textLabel {
-    flex-grow: 1;
-  }
-
-  .switch {
-    flex-shrink: 0;
-  }
-
-  &--checked {
-    color: getSemanticColor('surface', 'onSurface');
-  }
-
-  &--withBorder {
-    padding: getSpacing('md') getSpacing('lg');
-    border-radius: getBorderRadius('lg');
-    box-shadow: inset 0px 0px 0px 1px getSemanticColor('outline', 'outlineVariant');
-  }
-}

package/src/lib/ToggleInput/ToggleInput.spec.tsx

@@ -1,45 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import ToggleInput from './ToggleInput';
-import { ToggleInputProps } from './ToggleInput.types';
-
-describe('ToggleInput Component', () => {
-  const mockProps = {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    icon: 'notification_bell',
-    label: 'Test Label',
-    onChange: jest.fn(),
-    variant: 'rounded',
-  } as ToggleInputProps;
-
-  it('renders without crashing', () => {
-    render(<ToggleInput {...mockProps} />);
-  });
-
-  it('renders label and icon correctly', () => {
-    render(<ToggleInput {...mockProps} />);
-    const labelElement = screen.getByText('Test Label');
-    const iconElement = screen.getByRole('presentation');
-
-    expect(labelElement).toBeInTheDocument();
-    expect(iconElement).toBeInTheDocument();
-  });
-
-  it('calls onChange when the toggle switch is clicked', () => {
-    render(<ToggleInput {...mockProps} />);
-    const toggleSwitch = screen.getByTestId('toggle-switch');
-
-    fireEvent.click(toggleSwitch);
-
-    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders disabled state correctly', () => {
-    render(<ToggleInput {...mockProps} disabled={true} />);
-    const toggleSwitch = screen.getByTestId('toggle-switch');
-
-    expect(toggleSwitch).toBeDisabled();
-  });
-});

package/src/lib/ToggleInput/ToggleInput.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import Icons32 from '../Icon/icons/32x32';
-
-import ToggleInput from './ToggleInput';
-import { ToggleInputProps } from './ToggleInput.types';
-
-const meta: Meta<typeof ToggleInput> = {
-  argTypes: {
-    icon: {
-      control: {
-        type: 'select',
-      },
-      description: 'This will be icon of the toggle input',
-      options: [undefined, ...Object.keys(Icons32)],
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'This will be text of the toggle input',
-    },
-    onChange: { action: 'clicked', description: 'On click event callback' },
-
-    withBorder: {
-      defaultValue: 'false',
-      description: 'This will be variant of the toggle input',
-    },
-  },
-  component: ToggleInput,
-  title: 'Components/ToggleInput',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ToggleInput>;
-
-const WrapperToggle = (props: ToggleInputProps) => {
-  const [checked, setChecked] = useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
-  };
-
-  return <ToggleInput {...props} checked={checked} onChange={handleChange} />;
-};
-
-export const Primary: Story = {
-  args: {
-    icon: 'notification_bell',
-    label: 'Toggle Input',
-    withBorder: false,
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=181%3A2876&mode=dev',
-    },
-  },
-  render: WrapperToggle,
-};

package/src/lib/ToggleInput/ToggleInput.tsx

@@ -1,40 +0,0 @@
-import clsx from 'clsx';
-
-import Icon from '../Icon/Icon';
-import Toggle from '../Toggle/Toggle';
-import Typography from '../Typography/Typography';
-
-import styles from './ToggleInput.module.scss';
-import { ToggleInputProps } from './ToggleInput.types';
-
-const ToggleInput = ({
-  checked,
-  defaultChecked,
-  disabled,
-  icon,
-  label,
-  onChange,
-  withBorder,
-}: ToggleInputProps) => {
-  return (
-    <label
-      className={clsx(styles.toggleInput, {
-        [styles[`toggleInput--withBorder`]]: withBorder,
-        [styles[`toggleInput--checked`]]: checked,
-      })}
-    >
-      {icon && <Icon name={icon} size="32" />}
-      <Typography type="body-large" className={styles.textLabel}>
-        {label}
-      </Typography>
-      <Toggle
-        onChange={onChange}
-        disabled={disabled}
-        defaultChecked={defaultChecked}
-        className={styles.switch}
-      />
-    </label>
-  );
-};
-
-export default ToggleInput;

package/src/lib/Typography/Typography.module.scss

@@ -1,61 +0,0 @@
-.h1 {
-  @include typography('headings', 'H1');
-}
-
-.h2 {
-  @include typography('headings', 'H2');
-}
-
-.h3 {
-  @include typography('headings', 'H3');
-}
-
-.h4 {
-  @include typography('headings', 'H4');
-}
-
-.h5 {
-  @include typography('headings', 'H5');
-}
-
-.h6 {
-  @include typography('headings', 'H6');
-}
-
-.h7 {
-  @include typography('headings', 'H7');
-}
-
-.h8 {
-  @include typography('headings', 'H8');
-}
-
-// Body
-.body-large {
-  @include typography('body', 'Large');
-}
-
-.body-regular {
-  @include typography('body', 'Regular');
-}
-
-.body-semibold {
-  @include typography('body', 'Semibold');
-}
-
-.body-italic {
-  @include typography('body', 'Italic');
-}
-
-// Detail
-.detail-medium {
-  @include typography('detail', 'Medium');
-}
-
-.detail-bold {
-  @include typography('detail', 'Bold');
-}
-
-.detail-upper-case {
-  @include typography('detail', 'Upper Case');
-}

package/src/lib/Typography/Typography.spec.tsx

@@ -1,60 +0,0 @@
-import { render } from '@testing-library/react';
-
-import Typography from './Typography';
-import { TypographyType } from './Typography.types';
-
-describe('<Typography />', () => {
-  const types: TypographyType[] = [
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'body-large',
-    'body-regular',
-    'body-semibold',
-    'body-italic',
-    'detail-medium',
-    'detail-bold',
-    'detail-upper-case',
-  ];
-
-  types.forEach((type) => {
-    it(`renders correctly for type "${type}"`, () => {
-      const { getByText } = render(<Typography type={type}>Sample Text</Typography>);
-      const element = getByText('Sample Text');
-
-      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(type)) {
-        expect(element.tagName).toBe(type.toUpperCase());
-      } else {
-        expect(element.tagName).toBe('SPAN');
-      }
-
-      expect(element).toHaveClass(type);
-    });
-  });
-
-  it('renders correctly with "as" prop', () => {
-    const { getByText } = render(
-      <Typography type="body-large" as="p">
-        Sample Text
-      </Typography>,
-    );
-    const element = getByText('Sample Text');
-    expect(element.tagName).toBe('P');
-    expect(element).toHaveClass('body-large');
-  });
-
-  it('take a custom classname and adds it properly to the element', () => {
-    const { getByText } = render(
-      <Typography type="body-large" className="custom-classname">
-        Sample Text
-      </Typography>,
-    );
-    const element = getByText('Sample Text');
-    expect(element).toHaveClass('custom-classname');
-  });
-});

package/src/lib/Typography/Typography.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Typography from './Typography';
-
-const meta: Meta<typeof Typography> = {
-  component: Typography,
-  title: 'Components/Typography',
-};
-export default meta;
-type Story = StoryObj<typeof Typography>;
-
-export const Heading1: Story = {
-  args: {
-    children: 'Heading 1',
-    type: 'h1',
-  },
-};
-
-export const Heading2: Story = {
-  args: {
-    children: 'Heading 2',
-    type: 'h2',
-  },
-};
-
-export const BodyLarge: Story = {
-  args: {
-    children: 'Body Large Text',
-    type: 'body-large',
-  },
-};
-
-export const BodyRegular: Story = {
-  args: {
-    children: 'Body Regular Text',
-    type: 'body-regular',
-  },
-};
-
-export const DetailBold: Story = {
-  args: {
-    children: 'Detail Bold Text',
-    type: 'detail-bold',
-  },
-};

package/src/lib/Typography/Typography.tsx

@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-import React, { JSX } from 'react';
-
-import styles from './Typography.module.scss';
-import { TypographyProps, TypographyType } from './Typography.types';
-
-function deriveTagFromType(type: TypographyType): keyof JSX.IntrinsicElements {
-  switch (type) {
-    case 'h1':
-    case 'h2':
-    case 'h3':
-    case 'h4':
-    case 'h5':
-    case 'h6':
-      return type as keyof JSX.IntrinsicElements;
-    default:
-      return 'span';
-  }
-}
-
-function Typography({ as, children, className, type }: TypographyProps) {
-  const ElementTag = as || deriveTagFromType(type);
-  return <ElementTag className={clsx(styles[type], className)}>{children}</ElementTag>;
-}
-
-export default Typography;

package/src/lib/Typography/Typography.types.ts

@@ -1,28 +0,0 @@
-import { JSX } from 'react';
-
-export type TypographyType =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'h7'
-  | 'h8'
-  | 'body-large'
-  | 'body-regular'
-  | 'body-semibold'
-  | 'body-italic'
-  | 'detail-medium'
-  | 'detail-bold'
-  | 'detail-upper-case';
-
-export interface TypographyProps {
-  as?: Extract<
-    keyof JSX.IntrinsicElements,
-    'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  >;
-  children: string;
-  className?: string;
-  type: TypographyType;
-}

package/src/styles/_design-tokens.scss

@@ -1 +0,0 @@
-@forward '@goodhood/design-tokens/lib/web/index';

package/src/styles/_functions.scss

@@ -1,17 +0,0 @@
-@use 'sass:map';
-
-@function mapGet($map, $keys...) {
-  @return map.get($map, $keys...);
-}
-
-@function getSemanticColor($color, $shade) {
-  @return mapGet($tokens, color, semantic, $color, $shade);
-}
-
-@function getSpacing($spacingType) {
-  @return mapGet($tokens, spacing, $spacingType);
-}
-
-@function getBorderRadius($spacingType) {
-  @return mapGet($tokens, borderRadius, $spacingType);
-}

package/src/styles/_mixins.scss

@@ -1,33 +0,0 @@
-@use 'sass:map';
-
-@mixin spacing($properties, $map: map.get($tokens, 'spacing')) {
-  // Extract the correct spacing settings;
-  @each $size, $i in $map {
-    $value: map.get($tokens, 'spacing', $size);
-    &-#{$size} {
-      @each $property in $properties {
-        #{$property}: #{$value};
-      }
-    }
-  }
-}
-
-@mixin typography($type, $level) {
-  // Extract the correct typography settings based on the provided type and level
-  $typo-settings: map.get(map.get($tokens, $type), $level);
-
-  // Ensure the level exists
-  @if $typo-settings {
-    margin-bottom: mapGet($typo-settings, 'paragraphSpacing');
-    font-family: mapGet($typo-settings, 'fontFamily');
-    font-size: mapGet($typo-settings, 'fontSize');
-    font-weight: mapGet($typo-settings, 'fontWeight');
-    letter-spacing: mapGet($typo-settings, 'letterSpacing');
-    line-height: mapGet($typo-settings, 'lineHeight');
-    text-decoration: mapGet($typo-settings, 'textDecoration');
-    text-indent: mapGet($typo-settings, 'paragraphIndent');
-    text-transform: mapGet($typo-settings, 'textCase');
-  } @else {
-    @error "Unknown typography type: #{$type} or level: #{$level}.";
-  }
-}

package/src/styles/index.scss

@@ -1,3 +0,0 @@
-@import 'design-tokens';
-@import 'mixins';
-@import 'functions';

package/src/styles/reset.scss

@@ -1,65 +0,0 @@
-*, :after, :before {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-
-input {
-  border: none;
-  appearance: none;
-
-  &[type="search"] {
-    appearance: none;
-  }
-
-  &[type="file"]::-webkit-file-upload-button {
-    display: none;
-  }
-
-  &[type="number"] {
-    appearance: textfield;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      appearance: none;
-    }
-  }
-}
-
-select {
-  border: none;
-  appearance: none;
-  background-color: transparent;
-
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-textarea {
-  border: none;
-  appearance: none;
-  -ms-overflow-style: none;
-  resize: vertical;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  text-align: left;
-}
-
-ul,
-ol {
-  list-style-type: none;
-}
-
-img, svg{
-  display: block;
-  max-width: 100%;
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["vite/client"]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./tsconfig.storybook.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,35 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node", "vite/client"]
-  },
-  "files": [
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts"
-  ],
-  "exclude": [
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js",
-    "**/*.stories.jsx",
-    "**/*.stories.tsx"
-  ],
-  "include": [
-    "vite.config.ts",
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "__mocks__/**/*.js",
-    "__mocks__/**/*.ts"
-  ]
-}

package/tsconfig.spec.json

@@ -1,20 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
-  },
-  "include": [
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

package/tsconfig.storybook.json

@@ -1,31 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "outDir": ""
-  },
-  "files": [
-    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.js"
-  ],
-  "include": [
-    "src/**/*.stories.ts",
-    "src/**/*.stories.js",
-    "src/**/*.stories.jsx",
-    "src/**/*.stories.tsx",
-    "src/**/*.stories.mdx",
-    ".storybook/*.js",
-    ".storybook/*.ts"
-  ]
-}