SOSEC - Design System


Summary

1. What is the project


2. Component List


3. Installation Instructions


4. Use Instructions

1 - What is the project

This repository is a design system for web and desktop applications designed for applications related to exact sciences. Here, there will be components that support scientific notation and the AsciiMath standard, which is an easy-to-write markup language for mathematics. The repository is based on the atomic design methodology, until then divided into atoms, molecules and organisms.

2 - Component List

| Data Display | Input | Surface | Other |
| :---: | :---: | :---: | :---: |
| Avatar | Button | Box | Chart |
| Divider | Input | Sidebar | SplitScreen |
| Math Text | Input Group | Modal | |
| Table | Select | Popover | |
| Title | | Disclosure | |
| Typography | | | |

3 - Installation Instructions

Step 1: Download de Project: You can download the project with the npm dependency manager or through github link here. You can use create-next-app to have an initial configuration.
``
npm i sosec-ds
`

Through npm, you will have the production version, which contains only the components with their types, web fonts and global style folders. On github, you will also have project documentation with Storybook. To learn more about Storybook, click here.

Step 2: Import global styles: The repository has a folder with your global styles, you must import it into your css layout file. If you are using the src folder and TypeScript, the path is usually src/app/layout.tsx.
`
import 'sosec-ds/styles.css';
`

Step 3: Configure the tailwind.config file: Based on tailwind documentation: By default, any configuration you add in your own tailwind.config.js file is intelligently merged with the default configuration, with your own configuration acting as a set of overrides and extensions. The presets option lets you specify a different configuration to use as your base, making it easy to package up a set of customizations that you’d like to reuse across projects.

`
import type { Config } from "tailwindcss";

const config: Config = {
presets: [
require('sosec-ds/tailwind.config')
],
content: [
"./src/pages/*/.{js,ts,jsx,tsx,mdx}",
"./src/components/*/.{js,ts,jsx,tsx,mdx}",
"./src/app/*/.{js,ts,jsx,tsx,mdx}",
"./node_modules/sosec-ds/components/*/.{js,ts,jsx,tsx,mdx}"
],
theme: {
},
plugins: [],
};
export default config;

`

Above, an initial file is presented with the settings that must be added, note that it is necessary to insert a configuration in the presets and another configuration in the content.

`
presets: [
require('sosec-ds/tailwind.config')
]
`

`
content: [
"./src/pages/*/.{js,ts,jsx,tsx,mdx}",
"./src/components/*/.{js,ts,jsx,tsx,mdx}",
"./src/app/*/.{js,ts,jsx,tsx,mdx}",
"./node_modules/sosec-ds/components/*/.{js,ts,jsx,tsx,mdx}" / Here is the part that should be added /
]
`

Step 4: Transpile the package: In your next.config file, add the 'sosec-ds' package to be transpiled.

`
/* @type {import('next').NextConfig} /
const nextConfig = {
transpilePackages: ['sosec-ds']
};

export default nextConfig;

`

If you prefer, these steps are presented in a video on YouTube, to access, click here.

4 - Use Instructions

Import a Component Library: This library contains REACT components, all components and types are in same path. You can import using:

`
'use client';
import { Button, ButtonProps } from "sosec-ds"
import { Avatar, AvatarProps } from "sosec-ds"
import { Box, BoxProps } from "sosec-ds"
import { Disclosure, DisclosureProps } from "sosec-ds"
import { Divider, DividerProps } from "sosec-ds"
import { Input, InputProps } from "sosec-ds"
import { Math, MathProps } from "sosec-ds"
import { Modal, ModalProps } from "sosec-ds"
import { Select, SelectProps } from "sosec-ds"
import { Typography, TypographyProps } from "sosec-ds"
import { Table, TableProps } from "sosec-ds"
import { Title, TitleProps } from "sosec-ds"
import { Sidebar, SidebarProps } from "sosec-ds"
import { InputGroup, InputGroupProps } from "sosec-ds"

``