@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Code/oneDarkProTheme.ts

@@ -0,0 +1,70 @@
+const theme = {
+  plain: {
+    color: '#abb2bf',
+    backgroundColor: '#282c34',
+  },
+  styles: [
+    {
+      types: ['constant', 'keyword', 'selector'],
+      style: {
+        color: 'rgb(198, 120, 221)',
+      },
+    },
+    {
+      types: ['operator', 'symbol'],
+      style: {
+        color: 'rgb(86, 182, 194)',
+      },
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: 'rgb(171, 178, 191)',
+      },
+    },
+    {
+      types: ['variable', 'class-name', 'function', 'namespace', 'changed'],
+      style: {
+        color: 'rgb(229, 192, 123)',
+      },
+    },
+    {
+      types: ['char', 'tag', 'deleted'],
+      style: {
+        color: 'rgb(224, 108, 117)',
+      },
+    },
+    {
+      types: ['builtin', 'number'],
+      style: {
+        color: 'rgb(209, 154, 102)',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#d19a66',
+      },
+    },
+    {
+      types: ['inserted', 'string'],
+      style: {
+        color: 'rgb(152, 195, 121)',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: 'rgb(92, 99, 112)',
+      },
+    },
+    {
+      types: ['attr-value'],
+      style: {
+        color: '#98c379',
+      },
+    },
+  ],
+};
+
+export default theme;

package/src/components/Code/styles/style.scss

@@ -0,0 +1,58 @@
+/* Code component styles */
+.code {
+  font-feature-settings: 'calt' 1;
+  text-rendering: optimizeLegibility;
+}
+
+.code[class*='language-'] {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
+/* Inline code styles */
+.code--inline {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+/* Punctuation token color */
+.token.punctuation {
+  color: #abb2bf;
+}
+
+/* Code container styles */
+.code-container {
+  &.inline {
+    display: inline;
+  }
+  
+  &.block {
+    display: block;
+  }
+}
+
+/* Inline code element styles */
+.code-inline {
+  display: inline;
+  font-family: monospace;
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.625; /* leading-relaxed */
+  white-space: pre-wrap;
+  max-height: 300px; /* max-h-[300px] */
+}
+
+/* Block code element styles */
+.code-block {
+  display: block;
+  font-family: monospace;
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.625; /* leading-relaxed */
+  white-space: pre-wrap;
+  max-height: 300px; /* max-h-[300px] */
+}
+
+/* Pre element styles for block code */
+.pre-block {
+  overflow: auto;
+  margin: 0;
+  margin-bottom: 1rem; /* mb-4 */
+} 

package/src/components/Container/Container.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
-import cx from 'classnames';
+import React, { forwardRef } from "react";
+import cx from "classnames";
 
+const CLASS_ROOT = "container";
 
-const CLASS_ROOT = 'container';
-
-const Container = ({ className, ...other }: React.HTMLAttributes<HTMLDivElement>) => {
+const Container = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...other }, ref) => {
   const classes = cx(CLASS_ROOT, className);
 
-  return <div className={classes} {...other} />;
-};
+  return <div className={classes} ref={ref} {...other} />;
+});
 
-Container.displayName = 'Container';
+Container.displayName = "Container";
 
-export default Container;
+export { Container };

package/src/components/Container/index.ts

@@ -1,5 +1,3 @@
-import Container from './Container';
+import "./styles/style.scss";
 
-import './styles/style.scss';
-
-export default Container;
+export { Container } from "./Container";

package/src/components/Container/styles/style.scss

@@ -1,5 +1,7 @@
-@use './mixins';
+@use "./mixins";
 
-.container {
-  @include mixins.base;
+@layer components {
+  .container {
+    @include mixins.base;
+  }
 }

package/src/components/Container/tests/Container.conformance.test.js

@@ -23,88 +23,88 @@
  *    - Tests event handler forwarding (onClick)
  *    - Verifies all standard HTML div props are properly forwarded
  */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import 'jest-axe/extend-expect';
+import { render } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+import "jest-axe/extend-expect";
 
-import Container from '../';
+import { Container } from "../";
 
 // Extension of expect for axe
 expect.extend(toHaveNoViolations);
 
-describe('Container Conformance Tests', () => {
-  describe('HTML Validity', () => {
-    it('should render valid HTML structure', () => {
+describe("Container Conformance Tests", () => {
+  describe("HTML Validity", () => {
+    it("should render valid HTML structure", () => {
       const { container } = render(<Container />);
       expect(container).toHTMLValidate();
     });
 
-    it('should render valid HTML with children', () => {
+    it("should render valid HTML with children", () => {
       const { container } = render(
         <Container>
           <div>Test content</div>
           <p>Another element</p>
-        </Container>
+        </Container>,
       );
       expect(container).toHTMLValidate();
     });
 
-    it('should render valid HTML with custom props', () => {
+    it("should render valid HTML with custom props", () => {
       const { container } = render(
-        <Container 
-          id="test-container"
-          data-testid="container"
-        >
+        <Container id="test-container" data-testid="container">
           Content
-        </Container>
+        </Container>,
       );
       expect(container).toHTMLValidate();
     });
   });
 
-  describe('Accessibility (a11y)', () => {
-    it('should have no accessibility violations with default props', async () => {
+  describe("Accessibility (a11y)", () => {
+    it("should have no accessibility violations with default props", async () => {
       const { container } = render(<Container />);
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
 
-    it('should have no accessibility violations with children', async () => {
+    it("should have no accessibility violations with children", async () => {
       const { container } = render(
         <Container>
           <h1>Main heading</h1>
           <p>Some content</p>
           <button>Click me</button>
-        </Container>
+        </Container>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
 
-    it('should have no accessibility violations with ARIA attributes', async () => {
+    it("should have no accessibility violations with ARIA attributes", async () => {
       const { container } = render(
-        <Container 
+        <Container
           role="main"
           aria-label="Main content area"
           aria-describedby="description"
         >
           <div id="description">This is the main content area</div>
           <p>Content goes here</p>
-        </Container>
+        </Container>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
 
-    it('should have no accessibility violations with complex nested structure', async () => {
+    it("should have no accessibility violations with complex nested structure", async () => {
       const { container } = render(
         <Container>
           <header>
             <nav aria-label="Main navigation">
               <ul>
-                <li><a href="#home">Home</a></li>
-                <li><a href="#about">About</a></li>
+                <li>
+                  <a href="#home">Home</a>
+                </li>
+                <li>
+                  <a href="#about">About</a>
+                </li>
               </ul>
             </nav>
           </header>
@@ -117,32 +117,32 @@ describe('Container Conformance Tests', () => {
           <footer>
             <p>&copy; 2024 Company</p>
           </footer>
-        </Container>
+        </Container>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
   });
 
-  describe('Semantic HTML', () => {
-    it('should render as a div element by default', () => {
+  describe("Semantic HTML", () => {
+    it("should render as a div element by default", () => {
       const { container } = render(<Container />);
       const containerElement = container.firstChild;
-      expect(containerElement.tagName).toBe('DIV');
+      expect(containerElement.tagName).toBe("DIV");
     });
 
-    it('should preserve semantic meaning with proper heading structure', () => {
+    it("should preserve semantic meaning with proper heading structure", () => {
       const { container } = render(
         <Container>
           <h1>Page Title</h1>
           <h2>Section Title</h2>
           <h3>Subsection Title</h3>
-        </Container>
+        </Container>,
       );
       expect(container).toHTMLValidate();
     });
 
-    it('should maintain proper form semantics', () => {
+    it("should maintain proper form semantics", () => {
       const { container } = render(
         <Container>
           <form>
@@ -153,55 +153,60 @@ describe('Container Conformance Tests', () => {
             </fieldset>
             <button type="submit">Submit</button>
           </form>
-        </Container>
+        </Container>,
       );
       expect(container).toHTMLValidate();
     });
   });
 
-  describe('CSS Class Conformance', () => {
-    it('should have the correct base class', () => {
+  describe("CSS Class Conformance", () => {
+    it("should have the correct base class", () => {
       const { container } = render(<Container />);
       const containerElement = container.firstChild;
-      expect(containerElement).toHaveClass('container');
+      expect(containerElement).toHaveClass("container");
     });
 
-    it('should merge custom classes with base class', () => {
-      const { container } = render(<Container className="custom-class another-class" />);
+    it("should merge custom classes with base class", () => {
+      const { container } = render(
+        <Container className="custom-class another-class" />,
+      );
       const containerElement = container.firstChild;
-      expect(containerElement).toHaveClass('container', 'custom-class', 'another-class');
+      expect(containerElement).toHaveClass(
+        "container",
+        "custom-class",
+        "another-class",
+      );
     });
 
-    it('should handle empty className gracefully', () => {
+    it("should handle empty className gracefully", () => {
       const { container } = render(<Container className="" />);
       const containerElement = container.firstChild;
-      expect(containerElement).toHaveClass('container');
+      expect(containerElement).toHaveClass("container");
     });
   });
 
-  describe('Props Forwarding', () => {
-    it('should forward all HTML div attributes', () => {
+  describe("Props Forwarding", () => {
+    it("should forward all HTML div attributes", () => {
       const { container } = render(
-        <Container 
+        <Container
           id="test-id"
           data-testid="test-container"
           aria-label="Test container"
-          style={{ backgroundColor: 'red' }}
+          style={{ backgroundColor: "red" }}
           onClick={() => {}}
-        />
+        />,
       );
       const containerElement = container.firstChild;
-      expect(containerElement).toHaveAttribute('id', 'test-id');
-      expect(containerElement).toHaveAttribute('data-testid', 'test-container');
-      expect(containerElement).toHaveAttribute('aria-label', 'Test container');
-      expect(containerElement).toHaveStyle('background-color: red');
+      expect(containerElement).toHaveAttribute("id", "test-id");
+      expect(containerElement).toHaveAttribute("data-testid", "test-container");
+      expect(containerElement).toHaveAttribute("aria-label", "Test container");
     });
 
-    it('should handle event handlers correctly', () => {
+    it("should handle event handlers correctly", () => {
       const handleClick = jest.fn();
       const { container } = render(<Container onClick={handleClick} />);
       const containerElement = container.firstChild;
-      
+
       containerElement.click();
       expect(handleClick).toHaveBeenCalledTimes(1);
     });